<div>
	<div data-ng-hide="loading || data.length == 0">
		<table class="table table-hover table-striped">
			<thead class="table-header">
				<th>ID</th>
				            <th>Xero ID</th>
				<th>Type</th>
				<th class="centered">Total Price</th>
				<th class="centered">Date</th>
				<th class="centered">Related Task</th>
				<th class="centered">Paid</th>
				<th>Created by</th>
				<th class="centered">Created At</th>
			</thead>
			<tbody>
				<tr data-ng-repeat="invoice in data">
					<td><a href="{!! URL::to('invoices') !!}#/{[{ invoice.type }]}s/view/{[{ invoice.id }]}" ng-bind="::invoice.id"></a></td>
					<td><span ng-bind="::invoice.xeroId || 'Not synced'"></span></td>
					<td><span ng-bind="::invoice.type | capitalize"></span></td>
					<td class="centered"><span ng-bind="::invoice.total_price | currency:'£'"></span></td>
					<td class="centered"><span ng-bind="::invoice.invoice_date | moment:'DD/MM/YYYY'"></span></td>
					<td class="centered"><a href="{!! URL::to('tasks') !!}/{[{ invoice.task_id }]}" ng-bind="::invoice.task_id"></a></td>
					<td class="centered"><span class="badge" ng-class="::{'badge-warning': invoice.paid == '0', 'badge-success': invoice.paid > 0}">&nbsp;</span></td>
					<td><span ng-bind="::invoice.creator.name"></span></td>
					<td class="centered"><span uib-tooltip="{[{ ::invoice.created_at }]}" ng-bind="::invoice.created_at | date:'dd-MM-yy h:mm a'"></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>