<div class="edit-shift-dialog-container zoom-anim-dialog mfp-hide dialog" ng-controller="ShiftScheduleEditShiftCtrl">

	<div>

		<h1 class="title"><span>Edit shift: {{shift.community.name}}</span></h1>

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

		<span ng-if="loading"><br></span>

		<div class="bar-loader bar-loader-search" ng-class="{'bar-loader-loading': loading}"></div>

		<div class="support-box-wrap box-content2">

			<ng-form name="formEditShift">

				<div class="ul-inputs">
					<ul ng-class="{'submitted':formEditShiftSubmitted}" class="ul-inputs">

						<li class="li-input">
							<div class="info">
								<span class="label">Date:</span>
								<strong>{{shift.segment.start.day}}</strong>
							</div>
						</li>

						<li class="li-input" ng-if="shift.drivers_assigned">
							<div class="info">
								<span class="label">Assigned drivers:</span>
								<strong>{{shift.drivers_assigned}}.</strong>
							</div>
						</li>

						<li class="li-input" ng-class="{'error':formEditShift.shiftHours.$invalid}">
							<div class="label">Hours:</div>
							<div class="input"><input type="text" ng-disabled="!shift.editable"name="shiftHours" ng-model="shift.period" shift-hours-validation required placeholder="Hours" ></div>
							<div class="box-error">
								<small ng-show="formEditShift.shiftHours.$error.required">Required.</small>
								<small ng-show="formEditShift.shiftHours.$error.shiftHoursValidation">Unable to figure out what this time means.</small>
							</div>
							<div class="notes">
								e.g. “12 PM - 2:30 AM”
							</div>
						</li>

						<li class="li-input" ng-if="shift.recurring" ng-disabled="!shift.editable" ng-class="{'error': formEditShift.shiftChange.$invalid}">
							<div class="label">Change:</div>
							<div class="input">
								<select name="shiftChange" ng-model="shift.change" required>
									<option value="only-this-shift">Apply to only this shift</option>
									<option value="all-recurring-shifts">Apply to all recurring shifts (future shifts)</option>
								</select>
							</div>
							<div class="box-error">
								<small ng-show="formEditShift.shiftChange.$error.required">Required.</small>
							</div>
						</li>
					</ul>
					<ul class="ul-inputs submitted">
						<li class="li-input divider-line" ng-show="shift.drivers_assigned" ng-class="{'error': shift.ok_to_change == 'no'}">
							<div class="label">
								<span ng-if="shift.change == 'only-this-shift'">
									There are already driver(s) scheduled for this shift.
									Make sure they are aware you’re editing this shift’s hours before saving!
								</span>
								<span ng-if="shift.change == 'all-recurring-shifts'">
									There are already driver(s) scheduled for 1 or more shifts in this series of recurring shifts.
									Make sure they are aware you’re editing this shift’s hours before saving!
								</span>
							</div>
							<div class="input">
								<select name="shiftChange" ng-model="shift.ok_to_change" required>
									<option value="yes">Okay, they are aware I'm editing the shift's hours.</option>
									<option value="no">No, they aren't.</option>
								</select>
							</div>
						</li>

						<li class="li-input" ng-show="!isSavingAddShift">
							<span class="tag tag-red" ng-if="!shift.editable">Ready only!</span>
							<button ng-if="shift.editable && shift.ok_to_change == 'yes'" class="button button-empty button-border button-green button-full" ng-click="formEditShiftSave();"><span class="fa fa-save"></span>&nbsp;&nbsp;Save</button>
						</li>
						<li class="li-input" ng-show="isSavingAddShift">
							<i class="fa fa-circle-o-notch fa-spin"></i>
						</li>
					</ul>
				</div>
			</ng-form>
		</div>
		<div class="support-box-wrap box-content2" ng-if="shift.editable && shift.ok_to_change == 'yes'">
			<div class="ul-inputs">
				<ul  class="ul-inputs">
					<li class="li-input">
						<button class="button button-empty button-border button-blue button-full" ng-click="removeShift();"><span class="fa fa-trash"></span>&nbsp;&nbsp;Delete just this shift</button>
					</li>
					<li class="li-input" ng-if="shift.recurring">
						<button class="button button-empty button-border button-orange button-full" ng-click="removeRecurringShift();"><span class="fa fa-trash"></span>&nbsp;&nbsp;Delete all recurring</button>
					</li>
					<li class="li-input" ng-if="shift.recurring">
						<button class="button button-empty button-border button-red button-full" ng-click="removeRecurringFutureShift();"><span class="fa fa-trash"></span>&nbsp;&nbsp;Delete this shift and all future recurrences</button>
					</li>
				</ul>
			</div>
		</div>
	</div>
</div>