<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">Booked In</th>
		<th class="centered">Completed</th>
		<th class="centered">Labour</th>
		<th class="centered">Minutes Spent</th>
		<th>Status</th>
		<th class="centered">Invoiced</th>
		<th class="centered">Paid</th>
	</thead>
	<tbody>
		<tr ng-repeat="task in data">
			<td>
				<span ng-show="task.completed == '1' && task.paid == '1'" class="label label-success" uib-tooltip="{[{ ::tooltips.paid }]}">&nbsp;</span>
				<span ng-show="task.completed == '0'" class="label label-warning" uib-tooltip="{[{ ::tooltips.open }]}">&nbsp;</span>
				<span ng-show="task.completed == '1' && task.paid == '0' && task.invoiced == '1'" class="label label-danger" uib-tooltip="{[{ ::tooltips.payment }]}">&nbsp;</span>
				<span ng-show="task.completed == '1' && task.paid == '0' && task.invoiced == '0'" class="label label-default" uib-tooltip="{[{ ::tooltips.invoice }]}">&nbsp;</span>
			</td>
			<td><a href="{!! URL::to('/tasks/support') !!}/{[{ task.id }]}">{[{ task.id }]}</a></td>
			<td>{[{ task.title }]}</td>
			<td><i ng-class="{'fa fa-user': task.client_type == 'customer', 'fa fa-building-o': task.client_type == 'client'}"></i> <a href="{!! URL::to('/clients') !!}#{[{ (task.client_type == 'customer') ? 'customer' : 'client' }]}/{[{ task.client_id }]}">{[{ task.client.name }]}</a></td>
			<td><span strip-html="{[{ task.problem.substring(0, 40) + '...' }]}"></span></td>
			<td><span class="label label-info">{[{ task.user.name }]}</span></td>
			<td class="centered"><span uib-tooltip="{[{ ::task.created_at }]}">{[{ task.created_at | fromNow }]}</span></td>
			<td class="centered"><span uib-tooltip="{[{ ::task.completed_at }]}" ng-show="task.completed_at">{[{ task.completed_at | fromNow }]}</span></td>
			<td class="centered">{[{ task.labour | currency:"£" }]}</td>
			<td class="centered">{[{ task.time_spent }]}</td>
			<td>{[{ task.status.name }]}</td>
			<td class="centered"><i class="fa fa-check" ng-show="task.invoiced == '1'"></i></td>
			<td class="centered"><i class="fa fa-check" ng-show="task.paid == '1'"></i></td>
		</tr>
		<tr ng-show="loading">
			<td colspan="13"><i class="fa fa-spinner fa-spin"></i> Loading data...</td>
		</tr>
		<tr ng-show="!data.length && !loading">
			<td colspan="13">No remote support jobs found.</td>
		</tr>
	</tbody>
</table>