<div>
	<div data-ng-hide="loading || data.length == 0">
		<table class="table table-hover table-striped">
			<thead class="table-header">
				<th>ID</th>
				<th>Name</th>
				<th>Customer</th>
				<th>Contract</th>
				<th>Assigned To</th>
				<th class="centered">Planning</th>
				<th class="centered">Invoiced</th>
				<th class="centered">Paid</th>
				<th class="centered">Completed</th>
				<th class="centered">Booked In</th>
			</thead>
			<tbody>
				{{-- nadeem 7.3.17 | the orderBy below filter takes 2 args, column name (created_at) and reverse (bool - true in this case) this sorts new to old  --}}
				<tr data-ng-repeat="project in data | orderBy : 'project.created_at' : true ">
					<td><a href="{!! URL::to('projects') !!}/{[{ project.id }]}">{[{ project.id }]}</a></td>
					<td>{[{ project.name }]}</td>
					<td><i data-ng-class="{'fa fa-user': project.client_type == 'customer', 'fa fa-building-o': project.client_type == 'client'}"></i> {[{ project.client.name }]}</td>
					<td><span class="label label-success">{[{ project.client.contract.name }]}</span></td>
					<td>{[{ project.user.name }]}</td>
					<td class="centered"><span class="badge" ng-class="{'badge-warning': project.planning == '0', 'badge-success': project.planning == '1'}">&nbsp;</span></td>
					<td class="centered"><span class="badge" ng-class="{'badge-warning': project.invoiced == '0', 'badge-success': project.invoiced > 0}">&nbsp;</span></td>
					<td class="centered"><span class="badge" ng-class="{'badge-warning': project.paid == '0', 'badge-success': project.paid > 0}">&nbsp;</span></td>
					<td class="centered"><span class="badge" ng-class="{'badge-warning': project.completed == '0', 'badge-success': project.completed == '1'}">&nbsp;</span></td>
					<td class="centered"><span tooltip="{[{ project.created_at }]}">{[{ project.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>