<div class="task-group-inner">
	<div class="row">
		<div class="col-sm-9">
			<h1 style="margin-top: 0" ng-bind="getTimer()"></h1>
		</div>
		<div class="col-sm-3 text-right">
			<span class="btn btn-default" ng-if="!activeSession" ng-click="start()">
				<i class="fa fa-play text-success"></i> Start
			</span>
			<span class="btn btn-default" ng-if="activeSession" ng-click="stop()">
				<i class="fa fa-stop text-danger"></i> Stop
			</span>
		</div>
	</div>
	<div class="muted">
		Total time: <span ng-bind="getTotalTime()">00:15:23</span> &middot; <a href="#" ng-click="showHistory = !showHistory"  data-eat-click>Show History</a>
	</div>

	<!-- Render the time logs -->
	<div uib-collapse="showHistory">
		<hr />

		<table class="table table-striped table-condensed">
			<thead>
				<th class="centered" style="width: 50px;">Status</th>
				<th>User</th>
				<th class="centered">Duration</th>
			</thead>
			<tbody>
				<tr data-ng-repeat="time in history">
					<td class="centered"><i class="fa" ng-class="{'fa-play text-success': time.active, 'fa-stop': !time.active}"></i></td>
					<td ng-bind="::time.user.name"></td>
					<td class="centered" ng-bind="time.duration_formatted" tooltip="{[{ time.started_at + ' - ' + time.ended_at }]}"></td>
				</tr>
			</tbody>
		</table>
	</div>
</div>