<div>
	<div data-ng-hide="loading || data.length == 0">
		<table class="table table-hover table-striped">
			<thead class="table-header">
				<th>ID</th>
				<th></th>
				<th>Interested in</th>
				<th>Customer</th>
				<th>Contract</th>
				<th>Assigned To</th>
				<th>Status</th>
				<th class="centered">Budget</th>
				<th style="width: 100px;">Lead quality</th>
				<th class="centered" style="width: 100px;">Booked In</th>
				<th class="centered">Deadline</th>
			</thead>
			<tbody>
				<tr data-ng-repeat="task in data">
					<td><a href="{!! URL::to('tasks') !!}/{[{ task | taskUrl }]}">{[{ task.id }]}</a></td>
					<td>
						<span class="label label-danger" ng-show="task.severity_id == '4'">Gold Service</span>
						<span class="label label-warning" ng-show="task.severity_id == '3'">High</span>
						<span class="label label-info" ng-show="task.prebook == '1'" uib-tooltip="{[{ task.prebook_date }]}">Prebook</span>
						<span class="label label-inverse" ng-show="task.return_id" uib-tooltip="{[{ task.return_id }]}">Return</span>
					</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><span class="label label-success">{[{ task.client.contract.name }]}</span></td>
					<td>{[{ task.user.name }]}</td>
					<td>{[{ task.status.name }]}</td>
					<td class="centered">{[{ task.labour | currency:"£" }]}</td>
					<td><span class="label" ng-class="{'label-warning': getRatingPercentage(task.time_spent, 5)<30, 'label-info': getRatingPercentage(task.time_spent, 5)>=30 && getRatingPercentage(task.time_spent, 5)<70, 'label-success': getRatingPercentage(task.time_spent, 5)>=70}">{[{ getRatingPercentage(task.time_spent, 5) }]}%</span></td>
					<td class="centered"><span tooltip="{[{ task.created_at }]}">{[{ task.created_at | fromNow }]}</span></td>
					<td class="centered"><span tooltip="{[{ task.onsite_end }]}">{[{ task.onsite_end | 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>