<!-- Timestamp Plans -->
<h2>
	{{ 'timestampPlans' | translate }}
</h2>
<p>
	{{ 'tspPlanSubtitle' | translate }}
</p>

<!-- List -->
<div ng-switch="plans">
	<div ng-switch-when="null" class="loading-panel"></div>
	<div ng-switch-default>

		<div class="alert alert-info" role="alert" ng-show="plans.length == 0" style="width: 50%">
			<span class="glyphicon glyphicon-info-sign"></span>
			{{ 'tspNoPlansMessage' | translate }}
		</div>

		<div class="row" ng-show="plans.length > 0" ng-mouseleave="plans.focus = null">
			<div class="col-md-6">
				<ul class="list-group">
					<li ng-repeat="plan in plans | orderBy: '-isReadOnly'" class="list-group-item" ng-class="{ active: selectedPlan == plan, clickable: selectedPlan != plan }"
						ng-click="selectPlan(plan)" ng-mouseenter="plans.focus = plan">
						{{plan.name}}
						<span class="pull-right" ng-show="!plan.isReadOnly && plans.focus == plan">
							<button class="btn btn-xs btn-warning" ng-click="editPlan(plan)">
								<span class="glyphicon glyphicon-pencil"></span>
							</button>
						</span>
						<span class="pull-right" ng-show="plan.isReadOnly">
							<span class="label label-default">Standard</span>
						</span>
					</li>
				</ul>
			</div>
		</div>

		<!-- Create a new plan -->
		<div class="row">
			<div class="col-md-6">
				<div class="input-group">
					<input type="text" class="form-control" ng-model="newPlan.name" placeholder="{{ 'tspPlanNamePlaceholder' | translate }}">
					<span class="input-group-btn">
						<button class="btn btn-success" ng-disabled="!newPlan.name" ng-click="createPlan()">{{ 'create' | translate }}</button>
					</span>
				</div>
			</div>
		</div>

	</div>
</div>

<!-- Timestamp Requesters -->
<h2>
	{{ 'timestampRequesters' | translate }}
</h2>
<p>
	{{ 'tspRequesterSubtitle' | translate }}
</p>

<!-- List -->
<div ng-switch="requesters">
	<div ng-switch-when="null">

		<div class="alert alert-info" role="alert" style="width: 50%">
			<span class="glyphicon glyphicon-info-sign"></span>
			{{ 'tspSelectPlan' | translate }}
		</div>

	</div>
	<div ng-switch-default>

		<div class="alert alert-info" role="alert" ng-show="requesters.length == 0" style="width: 50%">
			<span class="glyphicon glyphicon-info-sign"></span>
			{{ 'tspNoRequestersMessage' | translate }}
		</div>

		<div class="row" ng-show="requesters.length > 0" ng-mouseleave="requesters.focus = null">
			<div class="col-md-6">
				<ul class="list-group">
					<li ng-repeat="requester in requesters" ng-mouseenter="requesters.focus = requester" ng-class="{ 'list-group-item': true, 'list-group-item-secondary': !requester.isEnabled }">
						<strong style="margin-right: 24px">{{ requester.priority }}</strong>
						{{ requester.name }}
						<i class="fa fa-check-circle text-success" aria-hidden="true" ng-show="requester.isAvailable && requester.isEnabled" tooltip="{{ 'available' | translate }}"></i>
						<i class="fa fa-times-circle text-danger" aria-hidden="true" ng-show="!requester.isAvailable && requester.isEnabled" tooltip="{{ 'unavailable' | translate }}"></i>
						<i class="fa fa-check-circle text-warning" aria-hidden="true" ng-show="requester.isAvailable && !requester.isEnabled" tooltip="{{ 'tspAvailableDisabled' | translate }}"></i>
						<i class="fa fa-times-circle text-secondary" aria-hidden="true" ng-show="!requester.isAvailable && !requester.isEnabled" tooltip="{{ 'tspUnavailableDisabled' | translate }}"></i>
						<span class="pull-right" ng-show="requesters.focus == requester">
							<button class="btn btn-xs btn-info" ng-click="moveRequester(requester, false)" ng-disabled="$first">
								<span class="glyphicon glyphicon-arrow-up"></span>
							</button>
							<button class="btn btn-xs btn-info" ng-click="moveRequester(requester, true)" ng-disabled="$last">
								<span class="glyphicon glyphicon-arrow-down"></span>
							</button>
							<button class="btn btn-xs btn-info" ng-click="requestHistory(requester)">
								<span class="glyphicon glyphicon-time"></span>
							</button>
							<button class="btn btn-xs btn-warning" ng-click="editRequester(requester)" ng-disabled="hasDirtyPriorities()">
								<span class="glyphicon glyphicon-pencil"></span>
							</button>
						</span>
					</li>
				</ul>
			</div>
		</div>

		<div class="row">
			<div class="col-md-6">
				<div ng-switch="hasDirtyPriorities()">

					<!-- Save or discard priority changes -->
					<div ng-switch-when="true" class="well">
						<span class="glyphicon glyphicon-sort" style="margin-right: 6px"></span>
						{{ 'tspDirtyPriorities' | translate }}
						<div class="pull-right">
							<button class="btn btn-xs btn-success" ng-click="savePriorities()">{{ 'save' | translate }}</button>
							<button class="btn btn-xs btn-danger" ng-click="discardPriorities()">{{ 'discard' | translate }}</button>
						</div>
					</div>

					<!-- Create new requester -->
					<div ng-switch-when="false">
						<div class="input-group">
							<input type="text" class="form-control" ng-model="newRequester.name" placeholder="{{ 'tspRequesterNamePlaceholder' | translate }}">
							<span class="input-group-btn">
								<button class="btn btn-success" ng-disabled="!newRequester.name" ng-click="createRequester()">{{ 'create' | translate }}</button>
							</span>
						</div>
					</div>

				</div>
			</div>
		</div>
	</div>
</div>
