<section class="tab {{tab.cssClass}}" data-tab="{{tab.id}}" data-group="{{tab.group}}">
  <fieldset>
    <legend data-tooltip aria-label="{{localize 'CALENDARIA.Editor.SectionTooltip.TimeStructure'}}">
      {{localize "CALENDARIA.Editor.Section.TimeStructure"}}
    </legend>

    <div class="notice warning">
      <i class="fas fa-exclamation-triangle"></i>
      {{localize "CALENDARIA.Editor.Warning.TimeSettings"}}
    </div>

    <div class="form-group">
      <label for="editor-hours-per-day">{{localize "CALENDARIA.Editor.Field.HoursPerDay"}}</label>
      <div class="form-fields">
        <input type="number" id="editor-hours-per-day" name="days.hoursPerDay" value="{{calendar.days.hoursPerDay}}"
          min="1" step="1">
      </div>
    </div>
    <div class="form-group">
      <label for="editor-minutes-per-hour">{{localize "CALENDARIA.Editor.Field.MinutesPerHour"}}</label>
      <div class="form-fields">
        <input type="number" id="editor-minutes-per-hour" name="days.minutesPerHour"
          value="{{calendar.days.minutesPerHour}}" min="1" step="1">
      </div>
    </div>
    <div class="form-group">
      <label for="editor-seconds-per-minute">{{localize "CALENDARIA.Editor.Field.SecondsPerMinute"}}</label>
      <div class="form-fields">
        <input type="number" id="editor-seconds-per-minute" name="days.secondsPerMinute"
          value="{{calendar.days.secondsPerMinute}}" min="1" step="1">
      </div>
    </div>
    <div class="form-group">
      <label for="editor-seconds-per-round">{{localize "CALENDARIA.Editor.Field.SecondsPerRound"}}</label>
      <div class="form-fields">
        <input type="number" id="editor-seconds-per-round" name="secondsPerRound" value="{{calendar.secondsPerRound}}"
          min="0" step="1">
      </div>
    </div>
  </fieldset>

  <fieldset>
    <legend data-tooltip aria-label="{{localize 'CALENDARIA.Editor.SectionTooltip.Daylight'}}">
      {{localize "CALENDARIA.Editor.Section.Daylight"}}
    </legend>

    <div class="form-group">
      <label for="editor-daylight-enabled">{{localize "CALENDARIA.Editor.Field.DaylightEnabled"}}</label>
      <div class="form-fields">
        <input type="checkbox" id="editor-daylight-enabled" name="daylight.enabled"
          {{#if calendar.daylight.enabled}}checked{{/if}}>
      </div>
      <p class="hint">{{localize "CALENDARIA.Editor.Hint.DaylightEnabled"}}</p>
      <p class="hint">{{localize "CALENDARIA.Editor.Hint.DaylightZoneOverride"}}</p>
    </div>

    <div class="form-group daylight-config" {{#unless calendar.daylight.enabled}}hidden{{/unless}}>
      <label for="editor-winter-solstice-month">{{localize "CALENDARIA.Editor.Field.ShortestDay"}}</label>
      <div class="form-fields">
        <select id="editor-winter-solstice-month" name="daylight.winterSolsticeMonth">
          {{#each winterSolsticeMonthOptions}}
            <option value="{{value}}" {{#if selected}}selected{{/if}}>{{label}}</option>
          {{/each}}
        </select>
        <input type="number" id="editor-winter-solstice-day" name="daylight.winterSolsticeDay"
          value="{{winterSolsticeDay}}" min="1" max="31" step="1">
      </div>
    </div>

    <div class="form-group daylight-config" {{#unless calendar.daylight.enabled}}hidden{{/unless}}>
      <label for="editor-shortest-day">{{localize "CALENDARIA.Editor.Field.ShortestDaySunlight"}}</label>
      <div class="form-fields">
        <input type="number" id="editor-shortest-day" name="daylight.shortestDay"
          value="{{calendar.daylight.shortestDay}}" min="0" max="{{calendar.days.hoursPerDay}}" step="0.5">
      </div>
      <p class="hint">{{localize "CALENDARIA.Editor.Hint.ShortestDay"}}</p>
    </div>

    <div class="form-group daylight-config" {{#unless calendar.daylight.enabled}}hidden{{/unless}}>
      <label for="editor-summer-solstice-month">{{localize "CALENDARIA.Editor.Field.LongestDay"}}</label>
      <div class="form-fields">
        <select id="editor-summer-solstice-month" name="daylight.summerSolsticeMonth">
          {{#each summerSolsticeMonthOptions}}
            <option value="{{value}}" {{#if selected}}selected{{/if}}>{{label}}</option>
          {{/each}}
        </select>
        <input type="number" id="editor-summer-solstice-day" name="daylight.summerSolsticeDay"
          value="{{summerSolsticeDay}}" min="1" max="31" step="1">
      </div>
    </div>

    <div class="form-group daylight-config" {{#unless calendar.daylight.enabled}}hidden{{/unless}}>
      <label for="editor-longest-day">{{localize "CALENDARIA.Editor.Field.LongestDaySunlight"}}</label>
      <div class="form-fields">
        <input type="number" id="editor-longest-day" name="daylight.longestDay" value="{{calendar.daylight.longestDay}}"
          min="0" max="{{calendar.days.hoursPerDay}}" step="0.5">
      </div>
      <p class="hint">{{localize "CALENDARIA.Editor.Hint.LongestDay"}}</p>
    </div>
  </fieldset>

  <fieldset>
    <legend data-tooltip aria-label="{{localize 'CALENDARIA.Editor.SectionTooltip.AmPmNotation'}}">
      {{localize "CALENDARIA.Editor.Section.AmPmNotation"}}
    </legend>
    <p class="hint">{{localize "CALENDARIA.Editor.Hint.AmPmNotation"}}</p>

    <div class="form-group">
      <label for="editor-am-notation">{{localize "CALENDARIA.Editor.Field.AmNotation"}}</label>
      <div class="form-fields">
        <input type="text" id="editor-am-notation" name="amPmNotation.am" value="{{calendar.amPmNotation.am}}"
          placeholder="{{localize 'CALENDARIA.Editor.Placeholder.AM'}}">
      </div>
    </div>

    <div class="form-group">
      <label for="editor-am-abbr">{{localize "CALENDARIA.Editor.Field.AmAbbreviation"}}</label>
      <div class="form-fields">
        <input type="text" id="editor-am-abbr" name="amPmNotation.amAbbr" value="{{calendar.amPmNotation.amAbbr}}"
          placeholder="{{localize 'CALENDARIA.Editor.Placeholder.AM'}}">
      </div>
    </div>

    <div class="form-group">
      <label for="editor-pm-notation">{{localize "CALENDARIA.Editor.Field.PmNotation"}}</label>
      <div class="form-fields">
        <input type="text" id="editor-pm-notation" name="amPmNotation.pm" value="{{calendar.amPmNotation.pm}}"
          placeholder="{{localize 'CALENDARIA.Editor.Placeholder.PM'}}">
      </div>
    </div>

    <div class="form-group">
      <label for="editor-pm-abbr">{{localize "CALENDARIA.Editor.Field.PmAbbreviation"}}</label>
      <div class="form-fields">
        <input type="text" id="editor-pm-abbr" name="amPmNotation.pmAbbr" value="{{calendar.amPmNotation.pmAbbr}}"
          placeholder="{{localize 'CALENDARIA.Editor.Placeholder.PM'}}">
      </div>
    </div>
  </fieldset>

  <fieldset>
    <legend data-tooltip aria-label="{{localize 'CALENDARIA.Editor.SectionTooltip.CanonicalHours'}}">
      {{localize "CALENDARIA.Common.CanonicalHours"}}
    </legend>
    <p class="hint">{{localize "CALENDARIA.Editor.Hint.CanonicalHours"}}</p>

    {{#if canonicalHoursWithNav.length}}
      <div class="items-list canonical-hours-list">
        <div class="list-header flexrow">
          <span class="col-name" data-tooltip
            aria-label="{{localize 'CALENDARIA.Editor.Tooltip.CanonicalHourName'}}">{{localize "CALENDARIA.Common.Name"}}</span>
          <span class="col-abbr" data-tooltip
            aria-label="{{localize 'CALENDARIA.Editor.Tooltip.CanonicalHourAbbr'}}">{{localize "CALENDARIA.Common.Abbreviation"}}</span>
          <span class="col-start" data-tooltip
            aria-label="{{localize 'CALENDARIA.Editor.Tooltip.CanonicalHourStart'}}">{{localize "CALENDARIA.Editor.Field.CanonicalHourStart"}}</span>
          <span class="col-end" data-tooltip
            aria-label="{{localize 'CALENDARIA.Editor.Tooltip.CanonicalHourEnd'}}">{{localize "CALENDARIA.Editor.Field.CanonicalHourEnd"}}</span>
          <span class="col-controls"></span>
        </div>

        {{#each canonicalHoursWithNav}}
          <div class="item canonical-hour-item flexrow" data-key="{{this.key}}">
            <input type="text" id="editor-canonical-{{this.key}}-name" name="canonicalHours.{{this.key}}.name"
              value="{{this.name}}" class="col-name">
            <input type="text" id="editor-canonical-{{this.key}}-abbr" name="canonicalHours.{{this.key}}.abbreviation"
              value="{{this.abbreviation}}" class="col-abbr">
            <input type="number" id="editor-canonical-{{this.key}}-start" name="canonicalHours.{{this.key}}.startHour"
              value="{{this.startHour}}" min="0" max="{{calendar.days.hoursPerDay}}" class="col-start">
            <input type="number" id="editor-canonical-{{this.key}}-end" name="canonicalHours.{{this.key}}.endHour"
              value="{{this.endHour}}" min="0" max="{{calendar.days.hoursPerDay}}" class="col-end">

            <div class="item-controls col-controls">
              <button type="button" data-action="addCanonicalHour" data-key="{{this.key}}" data-tooltip
                aria-label="{{localize 'CALENDARIA.Editor.AddCanonicalHour'}}">
                <i class="fas fa-plus"></i>
              </button>
              <button type="button" data-action="removeCanonicalHour" data-key="{{this.key}}" data-tooltip
                aria-label="{{localize 'CALENDARIA.Common.Remove'}}">
                <i class="fas fa-trash"></i>
              </button>
            </div>
          </div>
        {{/each}}
      </div>
    {{else}}
      <div class="empty-list">
        <p>{{localize "CALENDARIA.Editor.NoCanonicalHours"}}</p>
        <button type="button" data-action="addCanonicalHour">
          <i class="fas fa-plus"></i>
          {{localize "CALENDARIA.Editor.AddCanonicalHour"}}
        </button>
      </div>
    {{/if}}
  </fieldset>

</section>
