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

	<div>
		<h1 class="title"><span>Add shift: Community {{shift.community}}</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>

		<ng-form name="formAddShift">

			<div class="ul-inputs">

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

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

					<li class="li-input" ng-class="{'error':formAddShift.shiftHours.$invalid}">
						<div class="label">Hours:</div>
						<div class="input"><input type="text" name="shiftHours" ng-model="shift.hours" shift-hours-validation required placeholder="Hours" ></div>
						<div class="box-error">
							<small ng-show="formAddShift.shiftHours.$error.required">Required.</small>
							<small ng-show="formAddShift.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-class="{'error': formAddShift.shiftType.$invalid}" >
						<div class="label">Type:</div>
						<div class="input">
							<select name="shiftType" ng-model="shift.type" required>
								<option value="one-time-shift">One time shift</option>
								<option value="repeat-every-week">Repeat every week</option>
								<option value="repeat-every-day">Repeat every day moving forward</option>
							</select>
						</div>
						<div class="box-error">
							<small ng-show="formAddShift.shiftType.$error.required">Required.</small>
						</div>
					</li>

					<li class="li-input" ng-show="!isSavingAddShift">
						<button class="button button-empty button-border button-green button-full" ng-click="formAddShiftSave();"><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>