<div class="modal-header">
	<h3>Leaderboard</h3>
</div>
<div class="modal-body">
	<div class="alert alert-info"><i class="fa fa-info-circle"></i> <small>Points are earned by performing various activities, such as booking jobs, writing comments, fixing computers, going onsite, etc...</small></div>
	<div tabset>
		<div tab ng-repeat="tab in types" heading="{[{ tab.name }]}" select="data.selected_type = tab.value"></div>
	</div>
	<div class="text-right">
		<div class="pull-left" data-ng-show="loading" style="margin-top: 10px;"><i class="fa fa-spinner fa-spin fa-lg"></i> We are calculating scores, please be patient...</div>
		<select name="period" ng-model="data.period" ng-options="key as value.name for (key, value) in periods" style="margin-top: 5px;"></select>
	</div>
	<table class="table" data-ng-hide="loading">
		<thead class="table-header">
			<th></th>
			<th>Name</th>
			<th>Rank</th>
			<th class="centered">Task Points</th>
			<th class="centered">Labour Points</th>
			<th class="centered">Part Points</th>
			<th class="centered">Total Score</th>
		</thead>
		<tbody>
			<tr ng-repeat="user in users | orderBy:'points':true">
				<td>{[{ ($index + 1) }]}</td>
				<td>{[{ user.name }]}</td>
				<td>
					<span class="label label-default" data-ng-show="user.points < 2000">Private</span>
					<span class="label label-inverse" data-ng-show="user.points >= 2000 && user.points < 5000">Sergeant</span>
					<span class="label label-info" data-ng-show="user.points >= 5000 && user.points < 10000">Lieutenant</span>
					<span class="label label-success" data-ng-show="user.points >= 10000 && user.points < 20000">Captain</span>
					<span class="label label-warning" data-ng-show="user.points >= 20000 && user.points < 50000">Major</span>
					<span class="label label-danger" data-ng-show="user.points >= 50000 && user.points < 100000"><i class="fa fa-star-half-o"></i> Colonel</span>
					<span class="label label-danger" data-ng-show="user.points >= 100000"><i class="fa fa-star"></i> General</span>
				</td>
				<td class="centered">{[{ user.points_data.tasks }]}</td>
				<td class="centered">{[{ user.points_data.labour }]}</td>
				<td class="centered">{[{ user.points_data.parts }]}</td>
				<td class="centered"><strong>{[{ user.points }]}</strong></td>
			</tr>
		</tbody>
	</table>
</div>
<div class="modal-footer">
	<button class="btn" ng-click="cancel()">Close</button>
</div>