<div>
	<div data-ng-hide="loading || data.length == 0">
		<table class="table table-hover table-striped table-condensed">
			<thead class="table-header">
				<th style="width: 100px;">ID</th>
				<th>Title</th>
				<th>Customer</th>
				<th style="width: 71px;" class="centered">Pre-book</th>
				<th style="width: 100px;" class="centered">Priority</th>
				<th style="width: 150px;" class="centered" data-ng-hide="filter == 'queue'">Assigned To</th>
				<th style="width: 180px;">Status</th>
				<th class="centered" style="width: 150px;">Onsite Start date</th>
				<th class="centered" data-ng-hide="filter == 'queue'">Labour</th>
				<th class="centered" style="width: 100px;">Booked In</th>
			</thead>
			<tbody>
				<tr data-ng-repeat="task in data" ng-class="{'severity-4': task.severity_id == '4', 'severity-3': task.severity_id == '3', 'prebook-note': task.prebook == '1', 'red-highlight': (task.type == 'order' && ((task.created_at | diff:'hours') > 12 || task.severity_id == '3' || task.severity_id == '4') )}">
				<td></span><a href="{!! URL::to('tasks') !!}/{[{ task | taskUrl }]}">{[{ task.id }]}</a><i data-ng-if="task.comments_count.unread > 0" class="fa fa-comment new-comment-icon"><span class="new-comment-text">{[{ task.comments_count.unread }]}</i></td>
					<td>{[{ task.title }]}</td>
					<td><i data-ng-class="{'fa fa-user': task.client_type == 'customer', 'fa fa-building-o': task.client_type == 'client'}"></i> {[{ task.client.name }]}</td>
					<td class="centered"><i class="fa fa-check" data-ng-show="task.prebook == '1'"></i></td>
					<td class="centered"><span class="label" data-ng-class="{'label-danger': task.severity_id == '4', 'label-warning': task.severity_id == '3', 'label-info': task.severity_id == '2', 'label-default': task.severity_id == '1'}" data-ng-if="task.severity">{[{ task.severity.name }]}</span></td>
					<td class="centered" data-ng-hide="filter == 'queue'">{[{ task.user.name }]}</td>
					<td>{[{ task.status.name }]}</td>
					<td><span tooltip="{[{ task.created_at }]}" data-ng-show="task.type == 'onsite'">{[{ task.onsite_start | fromNow }]}</span></td>
					<td class="centered" data-ng-hide="filter == 'queue'">{[{ task.labour | currency:"£" }]}</td>
					<td class="centered"><span tooltip="{[{ task.created_at }]}">{[{ task.created_at | fromNow }]}</span></td>
				</tr>
			</tbody>
		</table>
		<div data-paginator="paginator"></div>
	</div>
	<div class="alert alert-warning" data-ng-show="data.length == 0 && !loading">
		<i class="fa fa-meh-o"></i> Meh, nothing here...
	</div>
	<div class="row" data-ng-show="loading">
		<i class="fa fa-spinner fa-spin"></i> Loading, please wait...
	</div>
</div>