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

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

	<h1 class="title left"><i class="fa fa-thumbs-up"></i><span>Shift Preferences</span></h1>

	<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>

	<h1 class="title">Driver Week: <strong>{{period}}</strong></h1>

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

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

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

			<div class="drivers-shift drivers-schedule">

		<div class="dialog-message dialog-message-error">
			<b><i class="fa fa-hand-o-right"></i> Don't forget: You must save your changes below!</b>
		</div>

		<div class="support-box-wrap box-content2">
			<div class="no-box-content-color">
				<p>
					<br>
					Realized you can't do a shift with less than 48 hours' notice?
					 <br>Let Support know ASAP and arrange for a replacement, otherwise the site will be shut down and we may not be able to rely on you as a driver in the future.
				</p>
			</div>
		</div>

			<div class="shifts-available">
				<h2 class="title">Shifts</h2>
				<div class="box-content2">
					<table class="tb-grid">
						<tbody ng-repeat="shift in shifts">
							<tr>
								<td valign="top">
									<div class="schedule-day">{{shift.day}} - {{shift.community}}</div>
									<div class="schedule-period">
										{{shift.period}} <span class="schedule-tz">{{shift.tz}}</span>
									</div>
								</td>
								<td class="td-larger schedule-buttons">
									<span ng-if="shift.assigned" title="Shift already assigned"><i class="fa fa-lock"></i> Shift already assigned</span>
									<button title="Yes, definitely!" ng-disabled="shift.assigned" class="button schedule-action-yes" ng-class="{'active':shift.ranking == 1 }" ng-click="shift.ranking = 1">
										<i class="fa fa-thumbs-o-up"></i>
									</button>
									<button title="I'm available" ng-disabled="shift.assigned" class="button schedule-action-maybe" ng-class="{'active':shift.ranking == 2 }" ng-click="shift.ranking = 2">
										<i class="fa fa-thumbs-o-up"></i>
									</button>
									<button title="I'm not available" ng-disabled="shift.assigned" class="button schedule-action-no" ng-class="{'active':shift.ranking == -1 }" ng-click="shift.ranking = -1">
										<i class="fa fa-thumbs-o-down"></i>
									</button>
								</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
			<div class="shift-schedule-rating-botton-space stick-botton-spacer"></div>

		</div>

		<div ng-if="!shifts.length" class="box-content2">
			You currently have no shifts to this period.
		</div>

	</div>



	<div class="support-box-wrap box-content2" sticky-bottom="80">
		<div class="no-box-content-color">
			<p class="left shift-schedule-rating-botton">
				<br>
				If possible, I'd like to work
					<select style="width:50px;" ng-model="options.shifts_from" ng-change="fixOptionTo()" ng-options="option.value as option.label for option in shiftsToWorkFrom"></select> <br>
					 to
					<select style="width:50px;" ng-model="options.shifts_to" ng-options="option.value as option.label for option in shiftsToWorkTo"></select>
					shifts this week.
			</p>
			<ul class="ul-inputs">
				<li class="li-input" ng-show="!isSaving">
					<button class="button save" ng-click="save();">Save</button>
				</li>
				<li class="li-input" ng-show="isSaving">
					<i class="fa fa-circle-o-notch fa-spin"></i>
				</li>
			</ul>
		</div>
	</div>
</div>


<div class="driver-shift-preferences-help zoom-anim-dialog mfp-hide dialog" ng-controller="DriversShiftsScheduleRatingHelpCtrl">
	<p>
		For each shift you must choose one of these following options:
	</p>
	<div class="schedule-buttons-help">

		<button title="Yes, definitely!" class="button schedule-action-yes active">
			<i class="fa fa-thumbs-o-up"></i>
		</button>
		Yes, definitely!
		<br>
		<button title="I'm available" class="button schedule-action-maybe active">
			<i class="fa fa-thumbs-o-up"></i>
		</button>
		I'm available
		<br>
		<button title="I'm not available" class="button schedule-action-no active">
			<i class="fa fa-thumbs-o-down"></i>
		</button>
		I'm not available
	</div>
	<p>
	<label>
		<input type="checkbox" ng-model="hide_shift_preferences_help"/> Do not show message again.
	</label>
	</p>
	<button class="button cancel" ng-click="closePopup();">Close</button>
</div>
