<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="support-box-wrap box-content2">
			<div class="divider"></div>
			<div class="no-box-content-color">
				<ul class="ul-inputs">
					<li class="li-input">
						<div class="label">How many shifts would you like to work?</div>
							<ui-select ng-model="shiftsAvailableToWork" on-select="updateShiftsAvailable($item)" theme="select2" style="width: 90%;" title="Select">
								<ui-select-match placeholder="Select">{{$select.selected.option}}</ui-select-match>
								<ui-select-choices repeat="opt in availableToWork | propsFilter: {option: $select.search}">
									{{opt.option}}
								</ui-select-choices>
							</ui-select>
					</li>
				</ul>
			</div>
			<div class="divider"></div>
		</div>

			<div class="shifts-available">

				<h2 class="title">All shifts</h2>

				<div class="box-content2">

					<table class="tb-grid">
						<tbody ng-repeat="shift in shifts" ng-if="shift.ranking > 0" >
							<tr>
								<td>
									<div>
										<strong>Ranking #{{shift.ranking}}</strong>
									</div>
									<div class="schedule-day">{{shift.day}} - {{shift.community}}</div>
									<div class="schedule-period">
										{{shift.period}} <span class="schedule-tz">{{shift.tz}}</span>
									</div>
									<label ng-if="!shift.assigned">
										<input type="checkbox" ng-click="dontWantToWork( shift.id_community_shift )"> Mark as Definitely Unavailable
									</label>
								</td>
								<td class="td-larger schedule-buttons">
									<button class="button schedule-action-down" ng-if="shift.ranking_next" ng-click="rankingChange( shift.id_community_shift,  shift.ranking_next )">
										<i class="fa fa-sort-desc"></i>
									</button>
									<button class="button schedule-action-up" ng-if="shift.ranking_prev" ng-click="rankingChange( shift.id_community_shift, shift.ranking_prev )">
										<i class="fa fa-sort-asc"></i>
									</button>
									<button class="button schedule-action-lock" ng-if="shift.assigned">
										<i class="fa fa-lock"></i>
									</button>
								</td>
							</tr>
						</tbody>
					</table>

					<table class="tb-grid">
						<tr ng-repeat="shift in shifts" ng-if="!shift.ranking && shift.ranking != 0">
							<td>
								<div class="schedule-day">{{shift.day}} - {{shift.community}}</div>
								<div class="schedule-period">
									{{shift.period}} <span class="schedule-tz">{{shift.tz}}</span>
								</div>
								<label ng-if="!shift.assigned">
									<input type="checkbox" ng-click="dontWantToWork( shift.id_community_shift )"> Mark as Definitely Unavailable
								</label>
							</td>
							<td class="td-large schedule-buttons">
								<button class="button schedule-action-yes" ng-if="!shift.assigned" ng-click="wantToWork( shift.id_community_shift )">
									<i class="fa fa-thumbs-o-up"></i>
								</button>
							</td>
						</tr>
					</table>

					<table class="tb-grid">
						<tr ng-repeat="shift in shifts" ng-if="shift.ranking == 0">
							<td>
								<div class="schedule-day">{{shift.day}} - {{shift.community}}</div>
								<div class="schedule-period">
									{{shift.period}} <span class="schedule-tz">{{shift.tz}}</span>
								</div>
								<label>
									<input type="checkbox" checked="checked" ng-click="wantToWork( shift.id_community_shift )"> Mark as Definitely Unavailable
								</label>
							</td>
						</tr>
					</table>

				</div>

			</div>


			<div class="box-content2">
				<table>
					<tbody>
						<tr>
							<td>
								<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>
							</td>
						</tr>
					</tbody>
				</table>
			</div>

		</div>

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

	</div>

</div>

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