<div class="modal-header">
	<h3 class="modal-title">Repairs Leaderboard</h3>
</div>
<div class="modal-body">
	<div class="text-right">
		<div class="pull-left" data-ng-show="vm.loading" style="margin-top: 10px;"><i class="fa fa-spinner fa-spin fa-lg"></i> We are calculating scores, please be patient...</div>
	</div>
	<p>Results for timeframe: {[{ vm.dates[0].format('DD/MM/YYYY') }]} to {[{ vm.dates[1].format('DD/MM/YYYY') }]} inclusive.</p>
	<table class="table" data-ng-hide="loading">
		<thead class="table-header">
			<th></th>
			<th>Name</th>
			<th class="centered">Total</th>
		</thead>
		<tbody>
			<tr ng-repeat="user in vm.users">
				<td>{[{ ($index + 1) }]}</td>
				<td>{[{ user.name }]}</td>
				<td class="centered"><strong>{[{ user.targets.total }]}</strong></td>
			</tr>
		</tbody>
	</table>
</div>
<div class="modal-footer">
	<button class="btn btn-default" ng-click="vm.close()">Close</button>
</div>