<div class="top-pad"></div>

<div class="content-padding" ng-show="ready">

	<h1 class="title left"><i class="fa fa-calendar"></i><span>Shifts</span></h1>
	<div class="box-filter right">
		<button class="button orange" ng-class="{ 'inactive' : !show.all }" ng-click="show.all = true">All</button>
		<button class="button orange" ng-class="{ 'inactive' : show.all }" ng-click="show.all = false">Mine</button>
	</div>

	<div class="divider"></div>

	<p class="header-note">
		You can still drive if you’re not scheduled! Cockpit will route orders to scheduled drivers first, and if they’re not accepted within 5 minutes, unscheduled drivers will be able to accept them.<br><br>
	</p>


	<p><a href="/drivers/shifts/schedule">Set up next week's shifts</a>
	<br><br></p>


	<div class="drivers-shifts-list">

		<div ng-if="drivershifts.length">

			<div class="drivers-shift" ng-repeat="shift in drivershifts | filter:filterShifts">

				<span class="day">{{shift.day}}</span>

				<div ng-if="shift.drivers.length > 0" class="box-content2">

					<table class="drivers">
						<tr class="driver" ng-repeat="driver in shift.drivers" ng-class="{me: (driver.id == account.user.id_admin)}">

							<td class="start-end"><div class="start-end-brace">{{driver.hour}}</div></td>

							<td class="driver-spacer"></td>

							<td class="driver-details">

								<span ng-if="!driver.name" class="no-drivers">
									No drivers
								</span>

								<span ng-if="driver.name">
									<span class="driver-name">{{driver.name}} - <i>{{driver.community}}</i></span><br>
									<a href ng-click="callText(driver.phone)" class="driver-phone">{{driver.phone | formatPhone}}</a>
								</span>

							</td>

						</tr>
					</table>
				</div>

			</div>

		</div>

		<div ng-if="!drivershifts.length" class="box-content">
			You are not currently scheduled for any shifts.
		</div>

	</div>

</div>

<spinner-loading></spinner-loading>
<hack-expand-content></hack-expand-content>