<section class="tab {{tab.cssClass}}" data-tab="schedule" data-group="primary" data-schedule-mode="{{#if isRecurring}}recurring{{else}}once{{/if}}">
  <div class="note-tab-schedule">
    {{#if isFestival}}
      <div class="festival-banner festival-banner--info">
        <i class="fas fa-star"></i>
        {{#if isGM}}
          <span>{{localize "CALENDARIA.Note.FestivalBannerLinkedGM"}} <a
              data-action="openFestivalEditor">{{localize "CALENDARIA.Settings.CalendarEditor.Name"}}</a>.</span>
        {{else}}
          <span>{{localize "CALENDARIA.Note.FestivalBannerLinked"}}</span>
        {{/if}}
      </div>
    {{/if}}
    <fieldset class="schedule-mode-fieldset">
      <legend data-tooltip aria-label="{{localize 'CALENDARIA.Note.Schedule.ModeHint'}}">
        {{localize "CALENDARIA.Note.Schedule.Mode"}}
      </legend>
      <div class="schedule-mode-options">
        <button type="button" class="mode-option{{#unless isRecurring}} active{{/unless}}"
          data-action="setScheduleMode" data-mode="once" {{#if isFestival}}disabled{{/if}}>
          <i class="fas fa-calendar-day"></i>
          <span>{{localize "CALENDARIA.Note.Schedule.ModeOnce"}}</span>
        </button>
        <button type="button" class="mode-option{{#if isRecurring}} active{{/if}}"
          data-action="setScheduleMode" data-mode="recurring">
          <i class="fas fa-repeat"></i>
          <span>{{localize "CALENDARIA.Note.Schedule.ModeRecurring"}}</span>
        </button>
      </div>
    </fieldset>
    <div class="form-row-dates{{#if isRecurring}} form-row-dates--recurring{{/if}}">
      <fieldset class="date-fieldset">
        <legend data-tooltip aria-label="{{localize 'CALENDARIA.Note.Tooltip.Date'}}">
          {{#if isRecurring}}{{localize "CALENDARIA.Note.Schedule.AnchorDate"}}{{else}}{{localize
            "CALENDARIA.Common.Start"}}{{/if}}
        </legend>
        <div class="form-group">
          <button type="button" class="date-picker-btn" data-action="selectDate" data-date-field="startDate"
            data-tooltip aria-label="{{localize 'CALENDARIA.UI.StartDateTooltip'}}">
            <i class="fas fa-calendar-alt"></i>
            <span>{{startDateDisplay}}</span>
          </button>
          <input type="hidden" name="system.startDate.year" value="{{system.startDate.year}}">
          <input type="hidden" name="system.startDate.month" value="{{system.startDate.month}}">
          <input type="hidden" name="system.startDate.dayOfMonth" value="{{system.startDate.dayOfMonth}}">
          <input type="hidden" name="system.endDate.year" value="{{system.endDate.year}}">
          <input type="hidden" name="system.endDate.month" value="{{system.endDate.month}}">
          <input type="hidden" name="system.endDate.dayOfMonth" value="{{system.endDate.dayOfMonth}}">
        </div>
      </fieldset>
      {{#if isRecurring}}
        <fieldset class="repeat-end-fieldset">
          <legend data-tooltip aria-label="{{localize 'CALENDARIA.Note.Schedule.RepeatEndDateHint'}}">
            {{localize "CALENDARIA.Note.Schedule.RepeatEndDate"}}
          </legend>
          <div class="form-group repeat-end-group">
            <button type="button" class="date-picker-btn" data-action="selectDate" data-date-field="repeatEndDate">
              <i class="fas fa-calendar-xmark"></i>
              <span>{{#if system.repeatEndDate}}{{repeatEndDateDisplay}}{{else}}{{localize
                  "CALENDARIA.Note.Schedule.NoRepeatEndDate"}}{{/if}}</span>
            </button>
            {{#if system.repeatEndDate}}
              <button type="button" class="clear-btn" data-action="clearRepeatEndDate" data-tooltip
                aria-label="{{localize 'CALENDARIA.Note.Schedule.ClearRepeatEndDate'}}">
                <i class="fas fa-times"></i>
              </button>
              <input type="hidden" name="system.repeatEndDate.year" value="{{system.repeatEndDate.year}}">
              <input type="hidden" name="system.repeatEndDate.month" value="{{system.repeatEndDate.month}}">
              <input type="hidden" name="system.repeatEndDate.dayOfMonth" value="{{system.repeatEndDate.dayOfMonth}}">
            {{/if}}
          </div>
        </fieldset>
      {{else}}
        <fieldset class="date-fieldset">
          <legend data-tooltip aria-label="{{localize 'CALENDARIA.Note.Tooltip.Date'}}">
            {{localize "CALENDARIA.Common.End"}}
          </legend>
          <div class="form-group">
            <button type="button" class="date-picker-btn" data-action="selectDate" data-date-field="endDate">
              <i class="fas fa-calendar-alt"></i>
              <span>{{endDateDisplay}}</span>
            </button>
          </div>
        </fieldset>
      {{/if}}
      <fieldset class="time-fieldset">
        <legend data-tooltip aria-label="{{localize 'CALENDARIA.Note.Tooltip.Time'}}">
          {{localize "CALENDARIA.Common.Time"}}
        </legend>
        <div class="time-grid">
          <label>{{localize "CALENDARIA.Common.Start"}}</label>
          <div class="time-inputs">
            <input type="text" inputmode="numeric" name="system.startDate.hour" value="{{startHourPadded}}"
              maxlength="2" size="2" {{#if system.allDay}}disabled{{/if}} data-tooltip
              aria-label="{{localize 'CALENDARIA.Common.Hour'}}">
            <span class="time-separator">:</span>
            <input type="text" inputmode="numeric" name="system.startDate.minute" value="{{startMinutePadded}}"
              maxlength="2" size="2" {{#if system.allDay}}disabled{{/if}} data-tooltip
              aria-label="{{localize 'CALENDARIA.Common.Minute'}}">
          </div>
          <label class="all-day-label">
            <input type="checkbox" name="system.allDay" {{checked system.allDay}} data-tooltip
              aria-label="{{localize 'CALENDARIA.UI.AllDayTooltip'}}">
            {{localize "CALENDARIA.Common.AllDay"}}
          </label>
          <label>{{localize "CALENDARIA.Common.End"}}</label>
          <div class="time-inputs">
            <input type="text" inputmode="numeric" name="system.endDate.hour" value="{{endHourPadded}}" maxlength="2"
              size="2" {{#if system.allDay}}disabled{{/if}} data-tooltip
              aria-label="{{localize 'CALENDARIA.Common.Hour'}}">
            <span class="time-separator">:</span>
            <input type="text" inputmode="numeric" name="system.endDate.minute" value="{{endMinutePadded}}"
              maxlength="2" size="2" {{#if system.allDay}}disabled{{/if}} data-tooltip
              aria-label="{{localize 'CALENDARIA.Common.Minute'}}">
          </div>
        </div>
      </fieldset>
      {{#if isRecurring}}
        <fieldset class="duration-fieldset">
          <legend data-tooltip aria-label="{{localize 'CALENDARIA.Note.Tooltip.DurationRecurring'}}">
            {{localize "CALENDARIA.Common.Duration"}}
          </legend>
          <label class="duration-days-label">
            <input type="number" name="system.duration" value="{{system.duration}}" min="1" step="1">
            {{localize "CALENDARIA.Common.Days"}}
          </label>
        </fieldset>
      {{/if}}
    </div>
    {{#if isRecurring}}
      <div class="schedule-row">
        <fieldset class="conditions-fieldset">
          <legend data-tooltip aria-label="{{localize 'CALENDARIA.Note.Schedule.ConditionBuilderHint'}}">
            {{localize "CALENDARIA.Condition.Builder.Title"}}
          </legend>
          <div class="condition-actions">
            <button type="button" class="cb-open-builder" data-action="openConditionBuilder">
              <i class="fas fa-sitemap"></i> {{localize "CALENDARIA.Condition.Builder.OpenBuilder"}}
            </button>
            <div class="preset-group">
              <select class="preset-select">
                <option value="">{{localize "CALENDARIA.Note.Schedule.SelectPreset"}}</option>
                <option value="__clear__">{{localize "CALENDARIA.Note.Schedule.ClearConditions"}}</option>
                {{#each presetGroups}}
                  <optgroup label="{{label}}">
                    {{#each options}}
                      <option value="{{id}}">{{label}}</option>
                    {{/each}}
                  </optgroup>
                {{/each}}
              </select>
            </div>
          </div>
          {{#if conditionSummaryHtml}}
            <div class="condition-groups">
              {{{conditionSummaryHtml}}}
            </div>
          {{else}}
            <p class="hint">{{localize "CALENDARIA.Note.Schedule.NoConditions"}}</p>
          {{/if}}
        </fieldset>
        <fieldset class="max-occurrences-fieldset">
          <legend data-tooltip aria-label="{{localize 'CALENDARIA.Note.Schedule.MaxOccurrencesTooltip'}}">
            {{localize "CALENDARIA.Note.Schedule.MaxOccurrences"}}
          </legend>
          <input type="number" name="system.maxOccurrences" value="{{system.maxOccurrences}}" min="0" step="1"
            placeholder="∞">
        </fieldset>
      </div>
    {{/if}}
    {{#if occurrences.length}}
      <fieldset class="occurrences-fieldset">
        <legend data-tooltip aria-label="{{localize 'CALENDARIA.Note.Tooltip.Occurrences'}}">
          {{localize "CALENDARIA.Note.Schedule.Occurrences"}}
        </legend>
        <ul class="occurrence-list">
          {{#each occurrences}}
            <li><i class="fas fa-calendar-day"></i> {{this}}</li>
          {{/each}}
        </ul>
      </fieldset>
    {{/if}}
  </div>
</section>
