<div
  class="offering-form"
  data-test-offering-form
  {{did-insert (perform this.load) @offering @cohorts}}
  {{did-update (perform this.load) @offering @cohorts}}
>
  {{#unless this.loadData.isRunning}}
    {{#let (unique-id) as |templateId|}}
      <div class="toggle-offering-calendar">
        <ToggleButtons
          @firstLabel={{t "general.hideCalendar"}}
          @firstOptionSelected={{not this.showOfferingCalendar}}
          @secondLabel={{t "general.showCalendar"}}
          @toggle={{toggle "showOfferingCalendar" this}}
        />
      </div>
      {{#if this.showOfferingCalendar}}
        <OfferingCalendar
          @endDate={{this.endDate}}
          @learnerGroups={{this.learnerGroups}}
          @startDate={{this.startDate}}
          @session={{@session}}
        />
      {{/if}}
      <div class="form">
        <fieldset class="scheduling">
          <legend>{{t "general.scheduling"}}</legend>
          <div class="start-date">
            <label>
              {{t "general.startDate"}}:
            </label>
            <DatePicker
              @value={{this.startDate}}
              @onChange={{this.updateStartDate}}
            />
          </div>
          <div class="start-time">
            <label>
              {{t "general.startTime"}}:
            </label>
            <TimePicker @date={{this.startDate}} @action={{this.updateStartTime}} />
          </div>
          <div class="offering-duration">
            <label>
              {{t "general.duration"}}:
            </label>
            <div class="duration-inputs">
              <div class="hours">
                <div class="hours-container">
                  <input
                    id="hours-{{templateId}}"
                    min="0"
                    type="number"
                    value={{this.durationHours}}
                    disabled={{this.saveOffering.isRunning}}
                    {{on "input" (perform this.updateDurationHours value="target.value")}}
                    {{on "keypress" (if @offering (perform this.saveOnEnter) (noop))}}
                  >
                  <label for="hours-{{templateId}}">
                    {{t "general.hours"}}
                  </label>
                </div>
                <ValidationError @errors={{get-errors-for this.durationHours}} />
              </div>
              <div class="minutes">
                <div class="minutes-container">
                  <input
                    id="minutes-{{templateId}}"
                    max="59"
                    min="0"
                    type="number"
                    value={{this.durationMinutes}}
                    disabled={{this.saveOffering.isRunning}}
                    {{on "input" (perform this.updateDurationMinutes value="target.value")}}
                    {{on "keypress" (if @offering (perform this.saveOnEnter) (noop))}}
                  >
                  <label for="minutes-{{templateId}}">
                    {{t "general.minutes"}}
                  </label>
                </div>
                <ValidationError @errors={{get-errors-for this.durationMinutes}} />
              </div>
            </div>
          </div>
          <div class="end-date-time">
            <label>
              {{t "general.end"}}:
            </label>
            {{#if this.endDate}}
              <div class="text">
                {{format-date this.endDate month="numeric" day="numeric" year="numeric" hour="numeric" minute="numeric"}}
              </div>
            {{/if}}
          </div>
          <div class="timezone" data-test-timezone-picker>
            <label for="timezone-{{templateId}}">
              {{t "general.timezone"}}:
            </label>
            {{#if this.isEditingTimezone}}
              <div class="picker">
                <select
                  id="timezone-{{templateId}}"
                  {{on "change" this.changeTimezone}}
                >
                  {{#each this.timezones as |timezone|}}
                    <option value={{timezone.value}} selected={{is-equal timezone.value this.currentTimezone}}>
                      {{timezone.label}}
                    </option>
                  {{/each}}
                </select>
                <span class="actions">
                  <button
                    class="cancel"
                    title={{t "general.cancel"}}
                    type="button"
                    {{on "click" (set this.isEditingTimezone false)}}
                  >
                    <FaIcon @icon="xmark" />
                  </button>
                </span>
              </div>
            {{else}}
              <div
                data-test-current-timezone
                class="current-timezone"
              >
                <button
                  class="link-button"
                  type="button"
                  {{on "click" (set this.isEditingTimezone true)}}
                >
                  {{this.formattedCurrentTimezone}}
                </button>
              </div>
            {{/if}}
          </div>

          {{#if @showMakeRecurring}}
            <div class="make-recurring">
              <label>
                {{t "general.makeRecurring"}}:
              </label>
              <div>
                <ToggleYesno
                  @yes={{this.makeRecurring}}
                  @toggle={{set this.makeRecurring (not this.makeRecurring)}}
                />
                {{#if this.makeRecurring}}
                  <div class="make-recurring-options">
                    <div class="make-recurring-days">
                      {{#each this.recurringDayOptions as |obj i|}}
                        <div data-test-make-recurring-day>
                          <input id="make-recurring-day-input-{{i}}-{{templateId}}"
                            type="checkbox"
                            checked={{or
                              (includes obj.day this.recurringDays)
                              (eq (moment-format this.startDate "d") obj.day)
                            }}
                            disabled={{eq (moment-format this.startDate "d") obj.day}}
                            data-test-recurring-day-input={{i}}
                            {{on "click" (fn this.toggleRecurringDay obj.day)}}
                          >
                          <label
                            class="day-of-week clickable"
                            for="make-recurring-day-input-{{i}}-{{templateId}}"
                            data-test-recurring-day-label={{i}}
                          >
                            {{t obj.t}}
                          </label>
                        </div>
                      {{/each}}
                    </div>
                    <div class="make-recurring-input-container">
                      <input type="text"
                        id="make-recurring-weeks-{{templateId}}"
                        value={{this.numberOfWeeks}}
                        class="make-recurring-input"
                        {{on "input" this.changeNumberOfWeeks}}
                        {{on "keyup" (fn this.addErrorDisplayFor "numberOfWeeks")}}
                      >
                      <label
                        class="make-recurring-input-label"
                        for="make-recurring-weeks-{{templateId}}"
                      >
                        {{t "general.weeks"}}
                      </label>
                      <ValidationError @errors={{get-errors-for this.numberOfWeeks}} />
                    </div>
                  </div>
                {{/if}}
              </div>
            </div>
          {{/if}}
          {{#if @showRoom}}
            <div class="room">
              <label for="location-{{templateId}}">
                {{t "general.location"}}:
                {{#unless @offering}}
                  <span class="label-description">({{t "general.defaultNotLoaded"}})</span>
                {{/unless}}
              </label>
              <input
                id="location-{{templateId}}"
                type="text"
                value={{this.room}}
                disabled={{this.saveOffering.isRunning}}
                {{on "input" this.changeRoom}}
                {{on "keyup" (fn this.addErrorDisplayFor "room")}}
                {{on "keypress" (if @offering (perform this.saveOnEnter) (noop))}}
              >
              <ValidationError @errors={{get-errors-for this.room}} />
            </div>
            <div class="url" data-test-url>
              <label for="url-{{templateId}}">
                {{t "general.virtualLearningLink"}}:
                {{#unless @offering}}
                  <span class="label-description">({{t "general.defaultNotLoaded"}})</span>
                {{/unless}}
              </label>
              {{! template-lint-disable no-bare-strings}}
              <input
                  id="url-{{templateId}}"
                  type="text"
                  placeholder="https://example.com"
                  value={{this.bestUrl}}
                  inputmode="url"
                  disabled={{this.saveOffering.isRunning}}
                  {{on "input" (pick "target.value" this.changeURL)}}
                  {{on "keyup" (fn this.addErrorDisplayFor "url")}}
                  {{on "focus" this.selectAllText}}
                  {{on "keypress" (if @offering (perform this.saveOnEnter) (noop))}}
              >
              <ValidationError @errors={{get-errors-for this.url}} />
            </div>
          {{/if}}
        </fieldset>
        {{#if @showInstructors}}
          <fieldset class="instructor-management" data-test-instructor-management>
            <legend>{{t "general.instructorsAndInstructorGroups"}}</legend>
            <InstructorSelectionManager
              @addInstructor={{this.addInstructor}}
              @addInstructorGroup={{this.addInstructorGroup}}
              @removeInstructor={{this.removeInstructor}}
              @removeInstructorGroup={{this.removeInstructorGroup}}
              @availableInstructorGroups={{this.availableInstructorGroups}}
              @instructorGroups={{this.instructorGroups}}
              @instructors={{this.instructors}}
              @showDefaultNotLoaded={{not this.hasOffering}}
            />
          </fieldset>
        {{/if}}
        <fieldset class="learner-management" data-test-learner-management>
          <legend>{{t "general.learnersAndLearnerGroups"}}</legend>
          <LearnergroupSelectionManager
            @learnerGroups={{this.learnerGroups}}
            @cohorts={{@cohorts}}
            @add={{this.addLearnerGroup}}
            @remove={{this.removeLearnerGroup}}
          />
          <ValidationError @errors={{get-errors-for this.learnerGroups}} />
          {{#unless @smallGroupMode}}
            <LearnerSelectionManager
              @learners={{this.learners}}
              @remove={{this.removeLearner}}
              @add={{this.addLearner}}
            />
          {{/unless}}
        </fieldset>
        <div class="buttons">
          <SaveButton
            class="done text"
            @isSaving={{this.saveOffering.isRunning}}
            @saveProgressPercent={{this.saveProgressPercent}}
            {{on "click" (perform this.saveOffering)}}
          >
            {{t "general.save"}}
          </SaveButton>
          <button
            class="cancel text"
            type="button"
            disabled={{this.saveOffering.isRunning}}
            {{on "click" @close}}
          >
            {{t "general.cancel"}}
          </button>
        </div>
      </div>
    {{/let}}
  {{/unless}}
</div>
