<table class="table table-condensed table-striped" ng-cloak>
	<thead>
		<th>Status</th>
		<th>ID</th>
		<th class="centered">Title</th>
		<th class="centered">Customer</th>
		<th class="centered">Description</th>
		<th class="centered">Assigned to</th>
		<th class="centered">Priority</th>
		<th class="centered">Pre-book</th>
		<th class="centered">Booked In</th>
		<th class="centered">Completed</th>
		<th class="centered">Labour</th>
		<th>Status</th>
		<th class="centered">Invoiced</th>
		<th class="centered">Paid</th>
	</thead>
	<tbody>
		<tr ng-repeat="repair in data">
			<td>
				<span ng-show="repair.completed == '1' && repair.paid == '1'" class="label label-success" uib-tooltip="{[{ ::tooltips.paid }]}">&nbsp;</span>
				<span ng-show="repair.completed == '0'" class="label label-warning" uib-tooltip="{[{ ::tooltips.open }]}">&nbsp;</span>
				<span ng-show="repair.completed == '1' && repair.paid == '0' && repair.invoiced == '1'" class="label label-danger" uib-tooltip="{[{ ::tooltips.payment }]}">&nbsp;</span>
				<span ng-show="repair.completed == '1' && repair.paid == '0' && repair.invoiced == '0'" class="label label-default" uib-tooltip="{[{ ::tooltips.invoice }]}">&nbsp;</span>
			</td>
			<td><a href="{!! URL::to('/tasks/repairs') !!}/{[{ repair.id }]}">{[{ repair.id }]}</a></td>
			<td>{[{ repair.title }]}</td>
			<td><i ng-class="{'fa fa-user': repair.client_type == 'customer', 'fa fa-building-o': repair.client_type == 'client'}"></i> <a href="{!! URL::to('/clients') !!}#{[{ (repair.client_type == 'customer') ? 'customer' : 'client' }]}/{[{ repair.client_id }]}">{[{ repair.client.name }]}</a></td>
			<td><span strip-html="{[{ repair.problem.substring(0, 40) + '...' }]}"></span></td>
			<td><span class="label label-info">{[{ repair.user.name }]}</span></td>
			<td class="centered"><span class="label" ng-class="{'label-danger': repair.severity.priority > 50, 'label-warning': repair.severity.priority == 50, 'label-info': repair.severity.priority < 50}">{[{ repair.severity.name }]}</span></td>
			<td class="centered"><i class="fa fa-check" ng-show="repair.prebook == '1'"></i></td>
			<td class="centered"><span uib-tooltip="{[{ ::repair.created_at }]}">{[{ repair.created_at ? (repair.created_at | date:'yyyy-MM-dd HH:mm:ss' | fromNow) : 'Invalid Date' }]}</span></td>
			<td class="centered"><span uib-tooltip="{[{ ::repair.completed_at }]}" ng-show="repair.completed_at">{[{ repair.completed_at ? (repair.completed_at | date:'yyyy-MM-dd HH:mm:ss' | fromNow) : 'Invalid Date' }]}</span></td>
			<td class="centered">{[{ repair.labour | currency:"£" }]}</td>
			<td>{[{ repair.status.name }]}</td>
			<td class="centered"><i class="fa fa-check" ng-show="repair.invoiced == '1'"></i></td>
			<td class="centered"><i class="fa fa-check" ng-show="repair.paid == '1'"></i></td>
		</tr>
		<tr ng-show="loading">
			<td colspan="14"><i class="fa fa-spinner fa-spin"></i> Loading data...</td>
		</tr>
		<tr ng-show="!data.length && !loading">
			<td colspan="14">No repairs found.</td>
		</tr>
	</tbody>
</table>