<div id="htmlTemplate" class=" SchedulerFormPanel Panel" ng-hide="hideForm">
    <div class="Form-header">
        <div class="Form-title" ng-show="!isEdit">{{ schedulerName || strings.get('state.CREATE_SCHEDULE') }}</div>
        <div class="Form-title" ng-show="isEdit">{{ schedulerName || strings.get('state.EDIT_SCHEDULE') }}</div>
        <div class="Form-header--fields"></div>
        <div class="Form-exitHolder">
            <button class="Form-exit" ng-click="formCancel()">
                <i class="fa fa-times-circle"></i>
            </button>
        </div>
    </div>
    <div id="SchedulerFormTarget">
        <form class="form Form"
            role="form"
            name="scheduler_form"
            novalidate>

            <div class="form-group SchedulerForm-formGroup">
                <label class="Form-inputLabel">
                    <span class="red-text">*</span>
                    {{ strings.get('form.NAME') }}
                </label>
                <input
                    type="text"
                    class="form-control input-sm
                        Form-textInput"
                    ng-class="{'RepeatFrequencyOptions-nameBorderErrorFix': scheduler_form.$dirty && scheduler_form.schedulerName.$error.required}"
                    name="schedulerName"
                    id="schedulerName"
                    ng-model="schedulerName" required
                    ng-disabled="!(schedule_obj.summary_fields.user_capabilities.edit || canAdd) || credentialRequiresPassword"
                    placeholder="Schedule name">
                <div class="error"
                    ng-show="scheduler_form.$dirty && scheduler_form.schedulerName.$error.required">
                    {{ strings.get('form.NAME_REQUIRED_MESSAGE') }}
                </div>
            </div>
            <div class="form-group SchedulerForm-formGroup">
                <label class="Form-inputLabel">
                    <span class="red-text">*</span>
                    {{ strings.get('form.START_DATE') }}
                </label>
                <div class="input-group Form-inputGroup SchedulerForm-inputGroup--date">
                    <scheduler-date-picker date="schedulerStartDt"
                        disabled="!(schedule_obj.summary_fields.user_capabilities.edit || canAdd) || credentialRequiresPassword">
                    </scheduler-date-picker>
                </div>
                <div class="error"
                    ng-show="scheduler_form_schedulerStartDt_error"
                    ng-bind="scheduler_form_schedulerStartDt_error">
                </div>
            </div>
            <div class="form-group SchedulerForm-formGroup">
                <label class="Form-inputLabel">
                    <span class="red-text">*</span>
                    {{ strings.get('form.START_TIME') }}
                    <span class="fmt-help"
                        ng-show="schedulerShowTimeZone">
                        (HH24:MM:SS)
                    </span>
                    <span class="fmt-help"
                        ng-show="!schedulerShowTimeZone">
                        (HH24:MM:SS UTC)
                    </span>
                </label>
                <div class="input-group SchedulerTime">
                    <input name="schedulerStartHour"
                        id="schedulerStartHour"
                        sch-spinner="scheduler_form"
                        ng-disabled="!(schedule_obj.summary_fields.user_capabilities.edit || canAdd) || credentialRequiresPassword"
                        class="scheduler-time-spinner
                            ScheduleTime-input SpinnerInput"
                        aw-spinner="schedulerStartHour"
                        ng-model="schedulerStartHour"
                        placeholder="HH24"
                        aw-min="0" min="0" aw-max="23"
                        max="23" data-zero-pad="2" required
                        ng-change="timeChange()" >
                    <span
                        class="SchedulerTime-separator">
                        :
                    </span>
                    <input name="schedulerStartMinute"
                        id="schedulerStartMinute"
                        sch-spinner="scheduler_form"
                        ng-disabled="!(schedule_obj.summary_fields.user_capabilities.edit || canAdd) || credentialRequiresPassword"
                        class="scheduler-time-spinner
                            SchedulerTime-input SpinnerInput"
                        aw-spinner="schedulerStartMinute"
                        ng-model="schedulerStartMinute"
                        placeholder="MM"
                        min="0" max="59" data-zero-pad="2"
                        required
                        ng-change="timeChange()" >
                    <span
                        class="SchedulerTime-separator">
                        :
                    </span>
                    <input name="schedulerStartSecond"
                        id="schedulerStartSecond"
                        sch-spinner="scheduler_form"
                        ng-disabled="!(schedule_obj.summary_fields.user_capabilities.edit || canAdd) || credentialRequiresPassword"
                        class="scheduler-time-spinner
                            SchedulerTime-input SpinnerInput"
                        aw-spinner="schedulerStartSecond"
                        ng-model="schedulerStartSecond"
                        placeholder="SS"
                        min="0" max="59" data-zero-pad="2"
                        required
                        ng-change="timeChange()" >
                </div>
                <div class="error"
                    ng-show="scheduler_startTime_error">
                    {{ strings.get('form.START_TIME_ERROR_MESSAGE') }}
                </div>
            </div>
            <div class="form-group SchedulerForm-formGroup"
                ng-show="schedulerShowTimeZone">
                <label class="Form-inputLabel">
                    <span class="red-text">*</span>
                    {{ strings.get('form.LOCAL_TIME_ZONE') }}
                </label>
                <select
                    ng-disabled="!(schedule_obj.summary_fields.user_capabilities.edit || canAdd) || credentialRequiresPassword"
                    name="schedulerTimeZone"
                    id="schedulerTimeZone"
                    ng-model="schedulerTimeZone"
                    ng-options="z.name for z in timeZones"
                    required class="form-control input-sm"
                    ng-change="scheduleTimeChange()" >
                </select>
                <option></option>
            </div>
            <div class="form-group SchedulerForm-formGroup">
                <label class="Form-inputLabel">
                    <span class="red-text">*</span>
                    {{ strings.get('form.REPEAT_FREQUENCY') }}
                </label>
                <select name="schedulerFrequency"
                    ng-disabled="!(schedule_obj.summary_fields.user_capabilities.edit || canAdd) || credentialRequiresPassword"
                    id="schedulerFrequency"
                    class="MakeSelect2"
                    ng-model="schedulerFrequency"
                    ng-options="f.name for f in frequencyOptions"
                    required class="form-control input-sm"
                    ng-change="scheduleRepeatChange()">
                </select>
                <div class="error"
                    ng-show="sheduler_frequency_error">
                </div>
            </div>
            <div class="RepeatFrequencyOptions-label"
                ng-show="schedulerFrequency.value && schedulerFrequency.value !== 'none'">
                {{ strings.get('form.FREQUENCY_DETAILS') }}</div>
            <div class="RepeatFrequencyOptions Form"
                ng-show="schedulerFrequency.value && schedulerFrequency.value !== 'none'">
                <div class="form-group
                    RepeatFrequencyOptions-everyGroup
                    RepeatFrequencyOptions-formGroup"
                    ng-show="schedulerShowInterval">
                    <label class="Form-inputLabel
                        RepeatFrequencyOptions-everyLabel">
                        <span class="red-text">*</span>
                        {{ strings.get('form.EVERY') }}
                    </label>
                    <input name="schedulerInterval"
                        id="schedulerInterval"
                        sch-spinner="scheduler_form"
                        ng-disabled="!(schedule_obj.summary_fields.user_capabilities.edit || canAdd) || credentialRequiresPassword"
                        class="scheduler-spinner
                            SpinnerInput"
                        aw-spinner="schedulerInterval"
                        ng-model="schedulerInterval"
                        min="1"
                        max="999"
                        ng-change="resetError('scheduler_interval_error')"
                    >
                    <label class="inline-label
                        RepeatFrequencyOptions-inlineLabel"
                        ng-bind="schedulerIntervalLabel">
                    </label>
                    <div
                        class="error
                            RepeatFrequencyOptions-error"
                        ng-show="$parent.scheduler_interval_error">
                        {{ strings.get('form.REPEAT_FREQUENCY_ERROR_MESSAGE') }}
                    </div>
                </div>
                <div class="form-group RepeatFrequencyOptions-formGroup"
                    ng-if="schedulerFrequency && schedulerFrequency.value == 'monthly'">
                    <div class="radio
                        RepeatFrequencyOptions-radioLabel">
                        <label class="Form-inputLabel">
                            <span class="red-text">*</span>
                            <input type="radio" value="day"
                                ng-disabled="!(schedule_obj.summary_fields.user_capabilities.edit || canAdd) || credentialRequiresPassword"
                                ng-model="$parent.monthlyRepeatOption"
                                ng-change="monthlyRepeatChange()"
                                name="monthlyRepeatOption"
                                id="monthlyRepeatOption">
                            {{ strings.get('form.ON_DAY') }}
                        </label>
                    </div>
                    <input
                        name="monthDay"
                        id="monthDay"
                        sch-spinner="scheduler_form"
                        ng-disabled="!(schedule_obj.summary_fields.user_capabilities.edit || canAdd) || credentialRequiresPassword"
                        class="scheduler-spinner SpinnerInput"
                        aw-spinner="$parent.monthDay"
                        ng-model="$parent.monthDay"
                        min="1" max="31"
                        ng-change="resetError('scheduler_monthDay_error')" >
                    <div class="error"
                        ng-show="$parent.scheduler_monthDay_error">
                        {{ strings.get('form.MONTH_DAY_ERROR_MESSAGE') }}
                    </div>
                </div>
                <div class="form-group
                    RepeatFrequencyOptions-formGroup"
                    ng-if="schedulerFrequency && schedulerFrequency.value == 'monthly'">
                    <div class="radio
                        RepeatFrequencyOptions-radioLabel">
                        <label class="Form-inputLabel">
                            <span class="red-text">*</span>
                            <input type="radio"
                                ng-disabled="!(schedule_obj.summary_fields.user_capabilities.edit || canAdd) || credentialRequiresPassword"
                                value="other"
                                ng-model="$parent.monthlyRepeatOption"
                                ng-change="monthlyRepeatChange()"
                                name="monthlyRepeatOption"
                                id="monthlyRepeatOption">
                            {{ strings.get('form.ON_THE') }}
                        </label>
                    </div>
                    <div class="RepeatFrequencyOptions-inputGroup
                        RepeatFrequencyOptions-inputGroup--halves">
                        <select name="monthlyOccurrence"
                            id="monthlyOccurrence"
                            ng-model="$parent.monthlyOccurrence"
                            ng-options="o.name for o in occurrences"
                            ng-disabled="monthlyRepeatOption != 'other' || !(schedule_obj.summary_fields.user_capabilities.edit || canAdd) || credentialRequiresPassword"
                            class=" MakeSelect2 form-control
                                input-sm
                                RepeatFrequencyOptions-spacedSelect
                                RepeatFrequencyOptions-monthlyOccurence"
                        >
                        </select>
                        <select name="monthlyWeekDay"
                            id="monthlyWeekDay"
                            ng-model="$parent.monthlyWeekDay"
                            ng-options="w.name for w in weekdays"
                            ng-disabled="monthlyRepeatOption != 'other' || !(schedule_obj.summary_fields.user_capabilities.edit || canAdd) || credentialRequiresPassword"
                            class="MakeSelect2 form-control input-sm" >
                        </select>
                    </div>
                </div>
                <div class="form-group
                    RepeatFrequencyOptions-formGroup"
                    ng-if="schedulerFrequency && schedulerFrequency.value == 'yearly'">
                    <div class="radio
                        RepeatFrequencyOptions-radioLabel">
                        <span class="red-text">*</span>
                        <label class="Form-inputLabel">
                            <input type="radio"
                                ng-disabled="!(schedule_obj.summary_fields.user_capabilities.edit || canAdd) || credentialRequiresPassword"
                                value="month"
                                ng-model="$parent.yearlyRepeatOption"
                                ng-change="yearlyRepeatChange()"
                                name="yearlyRepeatOption"
                                id="yearlyRepeatOption">
                            {{ strings.get('form.ON') }}
                        </label>
                    </div>
                    <div class="RepeatFrequencyOptions-inputGroup
                        RepeatFrequencyOptions-inputGroup--halvesWithNumber">
                        <select name="yearlyMonth"
                            id="yearlyMonth"
                            ng-model="$parent.yearlyMonth"
                            ng-options="m.name for m in months"
                            ng-disabled="yearlyRepeatOption != 'month' || !(schedule_obj.summary_fields.user_capabilities.edit || canAdd) || credentialRequiresPassword"
                            class="MakeSelect2 form-control input-sm
                                RepeatFrequencyOptions-spacedSelect"
                        >
                        </select>
                        <input name="yearlyMonthDay"
                            id="yearlyMonthDay"
                            sch-spinner="scheduler_form"
                            ng-disabled="!(schedule_obj.summary_fields.user_capabilities.edit || canAdd) || credentialRequiresPassword"
                            class="scheduler-spinner
                                SpinnerInput"
                            aw-spinner="$parent.yearlyMonthDay"
                            ng-model="$parent.yearlyMonthDay"
                            min="1" max="31"
                            ng-change="resetError('scheduler_yearlyMonthDay_error')"
                        >
                    </div>
                    <div class="error"
                        ng-show="$parent.scheduler_yearlyMonthDay_error">
                        {{ strings.get('form.MONTH_DAY_ERROR_MESSAGE') }}
                    </div>
                </div>
                <div class="form-group
                    RepeatFrequencyOptions-formGroup"
                    ng-if="schedulerFrequency && schedulerFrequency.value == 'yearly'">
                    <div class="radio
                        RepeatFrequencyOptions-radioLabel">
                        <label class="Form-inputLabel">
                            <span class="red-text">*</span>
                            <input type="radio"
                                ng-disabled="!(schedule_obj.summary_fields.user_capabilities.edit || canAdd) || credentialRequiresPassword"
                                value="other"
                                ng-model="$parent.yearlyRepeatOption"
                                ng-change="yearlyRepeatChange()"
                                name="yearlyRepeatOption"
                                id="yearlyRepeatOption">
                            {{ strings.get('form.ON_THE') }}
                        </label>
                    </div>
                    <div
                        class="RepeatFrequencyOptions-inputGroup
                            RepeatFrequencyOptions-inputGroup--thirds"
                    >
                        <select name="yearlyOccurrence"
                            id="yearlyOccurrence"
                            ng-model="$parent.yearlyOccurrence"
                            ng-options="o.name for o in occurrences"
                            ng-disabled="yearlyRepeatOption != 'other' || !(schedule_obj.summary_fields.user_capabilities.edit || canAdd) || credentialRequiresPassword"
                            class="MakeSelect2
                                form-control input-sm
                                RepeatFrequencyOptions-spacedSelect
                                RepeatFrequencyOptions-yearlyOccurence
                                RepeatFrequencyOptions-thirdSelect"
                        >
                        </select>
                        <select name="yearlyWeekDay"
                            id="yearlyWeekDay"
                            ng-model="$parent.yearlyWeekDay"
                            ng-options="w.name for w in weekdays"
                            ng-disabled="yearlyRepeatOption != 'other' || !(schedule_obj.summary_fields.user_capabilities.edit || canAdd) || credentialRequiresPassword"
                            class="MakeSelect2
                                form-control input-sm
                                RepeatFrequencyOptions-spacedSelect
                                RepeatFrequencyOptions-thirdSelect"
                        >
                        </select>
                        <select name="yearlyOtherMonth"
                            id="yearlyOtherMonth"
                            ng-model="$parent.yearlyOtherMonth"
                            ng-options="m.name for m in months"
                            ng-disabled="yearlyRepeatOption != 'other' || !(schedule_obj.summary_fields.user_capabilities.edit || canAdd) || credentialRequiresPassword"
                            class="MakeSelect2
                                form-control input-sm
                                RepeatFrequencyOptions-thirdSelect">
                        </select>
                    </div>
                </div>
                <div class="form-group
                    RepeatFrequencyOptions-week
                    RepeatFrequencyOptions-formGroup"
                    ng-if="schedulerFrequency && schedulerFrequency.value == 'weekly'">
                    <label class="Form-inputLabel">
                        <span class="red-text">*</span>
                        {{ strings.get('form.ON_DAYS') }}
                    </label>
                    <div class="input-group
                        RepeatFrequencyOptions-weekButtonContainer">
                        <div class="btn-group
                            RepeatFrequencyOptions-weekButtonGroup"
                            data-toggle="buttons-checkbox"
                            id="weekdaySelect">
                            <button type="button"
                                ng-disabled="!(schedule_obj.summary_fields.user_capabilities.edit || canAdd) || credentialRequiresPassword"
                                ng-class="weekDaySUClass"
                                class="btn btn-default
                                    RepeatFrequencyOptions-weekButton"
                                data-value="SU"
                                ng-click="$parent.setWeekday($event,'su')">
                                {{ strings.get('form.SUN') }}
                            </button>
                            <button type="button"
                                ng-disabled="!(schedule_obj.summary_fields.user_capabilities.edit || canAdd) || credentialRequiresPassword"
                                ng-class="weekDayMOClass"
                                class="btn btn-default
                                    RepeatFrequencyOptions-weekButton"
                                data-value="MO"
                                ng-click="$parent.setWeekday($event,'mo')">
                                {{ strings.get('form.MON') }}
                            </button>
                            <button type="button"
                                ng-disabled="!(schedule_obj.summary_fields.user_capabilities.edit || canAdd) || credentialRequiresPassword"
                                ng-class="weekDayTUClass"
                                class="btn btn-default
                                    RepeatFrequencyOptions-weekButton"
                                data-value="TU"
                                ng-click="$parent.setWeekday($event,'tu')">
                                {{ strings.get('form.TUE') }}
                            </button>
                            <button type="button"
                                ng-disabled="!(schedule_obj.summary_fields.user_capabilities.edit || canAdd) || credentialRequiresPassword"
                                ng-class="weekDayWEClass"
                                class="btn btn-default
                                    RepeatFrequencyOptions-weekButton"
                                data-value="WE"
                                ng-click="$parent.setWeekday($event,'we')">
                                {{ strings.get('form.WED') }}
                            </button>
                            <button type="button"
                                ng-disabled="!(schedule_obj.summary_fields.user_capabilities.edit || canAdd) || credentialRequiresPassword"
                                ng-class="weekDayTHClass"
                                class="btn btn-default
                                    RepeatFrequencyOptions-weekButton"
                                data-value="TH"
                                ng-click="$parent.setWeekday($event,'th')">
                                {{ strings.get('form.THU') }}
                            </button>
                            <button type="button"
                                ng-disabled="!(schedule_obj.summary_fields.user_capabilities.edit || canAdd) || credentialRequiresPassword"
                                ng-class="weekDayFRClass"
                                class="btn btn-default
                                    RepeatFrequencyOptions-weekButton"
                                data-value="FR"
                                ng-click="$parent.setWeekday($event,'fr')">
                                {{ strings.get('form.FRI') }}
                            </button>
                            <button type="button"
                                ng-disabled="!(schedule_obj.summary_fields.user_capabilities.edit || canAdd) || credentialRequiresPassword"
                                ng-class="weekDaySAClass"
                                class="btn btn-default
                                    RepeatFrequencyOptions-weekButton"
                                data-value="SA"
                                ng-click="$parent.setWeekday($event,'sa')">
                                {{ strings.get('form.SAT') }}
                            </button>
                        </div>
                    </div>
                    <div class="error"
                        ng-show="$parent.scheduler_weekDays_error">
                        {{ strings.get('form.WEEK_DAY_ERROR_MESSAGE') }}
                    </div>
                </div>
                <div class="form-group
                    RepeatFrequencyOptions-formGroup"
                    ng-if="schedulerShowInterval">
                    <label class="Form-inputLabel">
                        <span class="red-text">*</span>
                        {{ strings.get('form.END') }}
                    </label>
                    <div>
                        <select id="schedulerEnd"
                            ng-disabled="!(schedule_obj.summary_fields.user_capabilities.edit || canAdd) || credentialRequiresPassword"
                            name="schedulerEnd"
                            ng-model="$parent.schedulerEnd"
                            ng-options="e.name for e in endOptions"
                            required
                            class="MakeSelect2
                                form-control input-sm">
                        </select>
                    </div>
                </div>
                <div class="form-group
                    RepeatFrequencyOptions-everyGroup
                    RepeatFrequencyOptions-formGroup"
                    ng-if="schedulerEnd && schedulerEnd.value == 'after'">
                    <label class="Form-inputLabel">
                        <span class="red-text">*</span>
                        {{ strings.get('form.OCCURENCES') }}
                    </label>
                        <input
                            ng-name="schedulerOccurrenceCount"
                            ng-id="schedulerOccurrenceCount"
                            sch-spinner="scheduler_form"
                            ng-disabled="!(schedule_obj.summary_fields.user_capabilities.edit || canAdd) || credentialRequiresPassword"
                            class="scheduler-spinner
                                SpinnerInput"
                            aw-spinner="$parent.schedulerOccurrenceCount"
                            ng-model="$parent.schedulerOccurrenceCount"
                            min="1" max="999"
                            on-change="resetError('scheduler_occurrenceCount_error')"
                        >
                    <div class="error
                        RepeatFrequencyOptions-error"
                        ng-show="$parent.scheduler_occurrenceCount_error">
                        {{ strings.get('form.REPEAT_FREQUENCY_ERROR_MESSAGE') }}
                    </div>
                </div>
                <div class="form-group RepeatFrequencyOptions-formGroup"
                    ng-if="schedulerEnd && schedulerEnd.value == 'on'">
                    <label class="Form-inputLabel">
                        <span class="red-text">*</span>
                        {{ strings.get('form.END_DATE') }}
                    </label>
                    <div class="input-group Form-inputGroup SchedulerForm-inputGroup--date">
                        <scheduler-date-picker date="$parent.schedulerEndDt"
                          disabled="!(schedule_obj.summary_fields.user_capabilities.edit || canAdd) || credentialRequiresPassword">
                        </scheduler-date-picker>
                    </div>
                    <div class="error"
                        ng-show="$parent.scheduler_endDt_error">
                        {{ strings.get('form.PROVIDE_VALID_DATE') }}
                    </div>
                </div>
                <div class="form-group SchedulerForm-formGroup"
                ng-if="schedulerEnd && schedulerEnd.value == 'on'">
                    <label class="Form-inputLabel">
                        <span class="red-text">*</span>
                        {{ strings.get('form.END_TIME') }}
                        <span class="fmt-help"
                            ng-show="schedulerShowTimeZone">
                            (HH24:MM:SS)
                        </span>
                        <span class="fmt-help"
                            ng-show="!schedulerShowTimeZone">
                            (HH24:MM:SS UTC)
                        </span>
                    </label>
                    <div class="input-group SchedulerTime">
                        <input name="schedulerEndHour"
                            id="schedulerEndHour"
                            sch-spinner="scheduler_form"
                            ng-disabled="!(schedule_obj.summary_fields.user_capabilities.edit || canAdd) || credentialRequiresPassword"
                            class="scheduler-time-spinner
                                ScheduleTime-input SpinnerInput"
                            aw-spinner="$parent.schedulerEndHour"
                            ng-model="$parent.schedulerEndHour"
                            placeholder="HH24"
                            aw-min="0" min="0" aw-max="23"
                            max="23" data-zero-pad="2" required
                            ng-change="schedulerEndChange('schedulerEndHour', $parent.schedulerEndHour)" >
                        <span
                            class="SchedulerTime-separator">
                            :
                        </span>
                        <input name="schedulerEndMinute"
                            id="$parent.schedulerEndMinute"
                            sch-spinner="scheduler_form"
                            ng-disabled="!(schedule_obj.summary_fields.user_capabilities.edit || canAdd) || credentialRequiresPassword"
                            class="scheduler-time-spinner
                                SchedulerTime-input SpinnerInput"
                            aw-spinner="$parent.schedulerEndMinute"
                            ng-model="$parent.schedulerEndMinute"
                            placeholder="MM"
                            min="0" max="59" data-zero-pad="2"
                            required
                            ng-change="schedulerEndChange('schedulerEndMinute', $parent.schedulerEndMinute)" >
                        <span
                            class="SchedulerTime-separator">
                            :
                        </span>
                        <input name="schedulerEndSecond"
                            id="schedulerEndSecond"
                            sch-spinner="scheduler_form"
                            ng-disabled="!(schedule_obj.summary_fields.user_capabilities.edit || canAdd) || credentialRequiresPassword"
                            class="scheduler-time-spinner
                                SchedulerTime-input SpinnerInput"
                            aw-spinner="$parent.schedulerEndSecond"
                            ng-model="$parent.schedulerEndSecond"
                            placeholder="SS"
                            min="0" max="59" data-zero-pad="2"
                            required
                            ng-change="schedulerEndChange('schedulerEndSecond', $parent.schedulerEndSecond)" >
                    </div>
                    <div class="error"
                        ng-show="scheduler_startTime_error">
                        {{ strings.get('form.START_TIME_ERROR_MESSAGE') }}
                    </div>
                </div>
            </div>
            <div class="RepeatFrequencyOptions-subFormBorderFixer"
                 ng-show="schedulerFrequency.value && schedulerFrequency.value !== 'none'">
            </div>
        </form>
        <div class="SchedulerFormDetail-container
            SchedulerFormDetail-container--error"
            ng-show="(preview_list.isEmpty && scheduler_form.$dirty) || (!schedulerIsValid && scheduler_form.$dirty)">
            <p class="SchedulerFormDetail-errorText">
                {{ strings.get('form.SCHEDULER_OPTIONS_ARE_INVALID') }}
            </p>
        </div>
        <div class="SchedulerFormDetail-container"
            ng-show="schedulerIsValid &&  !preview_list.isEmpty">
            <label class="SchedulerFormDetail-label">
                {{ strings.get('form.SCHEDULE_DESCRIPTION') }}
            </label>
            <div class="SchedulerFormDetail-nlp" ng-hide="rrule_nlp_description == 'Natural language description not available' ">
                {{ rrule_nlp_description }}
            </div>
            <div class="SchedulerFormDetail-occurrenceHeader">
                <label class="SchedulerFormDetail-label
                    SchedulerFormDetail-labelOccurrence">
                    {{ strings.get('form.OCCURENCES') }}
                    <span
                        class="SchedulerFormDetail-labelDetail">
                        ({{ strings.get('form.LIMITED_TO_FIRST_TEN') }})
                    </span>
                </label>
                <div id="date-choice"
                    class="SchedulerFormDetail-dateFormats">
                    <label
                        class="SchedulerFormDetail-dateFormatsLabel">
                        {{ strings.get('form.DATE_FORMAT') }}
                    </label>
                    <label class="radio-inline
                        SchedulerFormDetail-radioLabel">
                        <input type="radio"
                            class="SchedulerFormDetail-radioButton"
                            ng-model="dateChoice"
                            id="date-choice-local"
                            value="local" >
                        {{ strings.get('form.LOCAL_TIME_ZONE') }}
                    </label>
                    <label class="radio-inline
                        SchedulerFormDetail-radioLabel">
                        <input type="radio"
                            class="SchedulerFormDetail-radioButton"
                            ng-model="dateChoice"
                            id="date-choice-utc"
                            value="utc" >
                        UTC
                    </label>
                </div>
            </div>
            <ul class="occurrence-list mono-space
                SchedulerFormDetail-occurrenceList"
                ng-show="dateChoice == 'utc'">
                <li ng-repeat="occurrence in preview_list.utc">
                    {{ occurrence }} UTC
                </li>
            </ul>
            <ul class="occurrence-list mono-space
                SchedulerFormDetail-occurrenceList"
                ng-show="dateChoice == 'local'">
                <li ng-repeat="occurrence in preview_list.local">
                    {{ occurrence }}
                </li>
            </ul>

        </div>
        <div class="form-group Form-formGroup Form-textAreaLabel Form-formGroup--fullWidth" ng-hide="noVars">
            <label for="Scheduler-extraVars">
                <span class="Form-inputLabel">
                    {{ strings.get('form.EXTRA_VARIABLES') }}
                </span>
                <!-- tooltip -->
                <a aw-pop-over="<p>Pass extra command line variables to the playbook. This is the -e or --extra-vars command line parameter for ansible-playbook. Provide key/value pairs using either YAML or JSON.</p>JSON:<br />
                <blockquote>{<br />&quot;somevar&quot;: &quot;somevalue&quot;,<br />&quot;password&quot;: &quot;magic&quot;<br /> }</blockquote>
                YAML:<br />
                <blockquote>---<br />somevar: somevalue<br />password: magic<br /></blockquote>"
                data-placement="right" data-container="body" over-title="Extra Variables" class="help-link" data-original-title="" title="" tabindex="-1">
                    <i class="fa fa-question-circle"></i>
                </a>

                <div class="parse-selection">
                    <input type="radio" ng-model="parseType" ng-change="parseTypeChange('parseType', 'extraVars')" value="yaml"><span class="parse-label">YAML</span>
                    <input type="radio"  ng-model="parseType" ng-change="parseTypeChange('parseType', 'extraVars')" value="json"> <span class="parse-label">JSON</span>
                </div>

            </label>
            <div ng-class="{'CodeMirror--disabled': !(schedule_obj.summary_fields.user_capabilities.edit || canAdd) || credentialRequiresPassword}">
                <textarea rows="6" ng-model="extraVars" name="Scheduler-extraVars" class="form-control" id="SchedulerForm-extraVars"></textarea>
            </div>
        </div>
    </div>
    <div class="buttons Form-buttons">
        <button type="button"
            class="btn btn-sm Form-primaryButton Form-primaryButton--noMargin"
            id="schedule_prompt_btn"
            ng-show="showPromptButton"
            ng-click="prompt()">{{ strings.get('form.PROMPT') }}</button>
        <button type="button"
            class="btn btn-sm Form-cancelButton"
            id="schedule_cancel_btn"
            ng-show="!(schedule_obj.summary_fields.user_capabilities.edit || canAdd) || credentialRequiresPassword"
            ng-click="formCancel()">{{ strings.get('form.CLOSE') }}</button>
        <button type="button"
            class="btn btn-sm Form-cancelButton"
            id="schedule_cancel_btn"
            ng-show="(schedule_obj.summary_fields.user_capabilities.edit || canAdd) && !credentialRequiresPassword"
            ng-click="formCancel()">{{ strings.get('form.CANCEL') }}</button>
        <div class="SchedulerForm-promptSave" ng-show="(schedule_obj.summary_fields.user_capabilities.edit || canAdd) && !credentialRequiresPassword">

            <div ng-if="promptModalMissingReqFields" class="SchedulerForm-promptSaveTooltip" aw-tool-tip="Additional information required in the Prompt area before saving" data-placement="top"></div>
            <button type="button"
                class="btn btn-sm Form-saveButton"
                id="schedule_save_btn"
                ng-click="saveSchedule()"
                ng-disabled="!schedulerIsValid || promptModalMissingReqFields || (preview_list.isEmpty && scheduler_form.$dirty) || credentialRequiresPassword">  {{ strings.get('form.SAVE') }}</button>
        </div>
    </div>
<prompt prompt-data="promptData" prevent-creds-with-passwords="preventCredsWithPasswords" action-text="{{:: strings.get('prompt.CONFIRM')}}" read-only-prompts="!(schedule_obj.summary_fields.user_capabilities.edit || canAdd)"></prompt>
</div>
