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

    <div class="form-group">
      <label for="editor-week-start">{{localize "CALENDARIA.Editor.Field.WeekStart"}}</label>
      <div class="form-fields">
        <select id="editor-week-start" name="years.weekStartWeekdayId" {{#if hasActiveCycle}}disabled{{/if}}>
          {{#each weekStartOptions}}
            <option value="{{this.value}}" {{#if this.selected}}selected{{/if}}>{{localize this.label}}</option>
          {{/each}}
        </select>
      </div>
      <p class="hint">{{#if hasActiveCycle}}{{localize "CALENDARIA.Editor.Hint.WeekStartCycleDisabled"}}{{else}}{{localize "CALENDARIA.Editor.Hint.WeekStart"}}{{/if}}</p>
    </div>

    <div class="items-list weekdays-list">
      <div class="list-header flexrow">
        <span class="col-name" data-tooltip
          aria-label="{{localize 'CALENDARIA.Editor.Tooltip.WeekdayName'}}">{{localize "CALENDARIA.Common.Name"}}</span>
        <span class="col-abbr" data-tooltip
          aria-label="{{localize 'CALENDARIA.Editor.Tooltip.WeekdayAbbr'}}">{{localize "CALENDARIA.Common.Abbreviation"}}</span>
        <span class="col-rest" data-tooltip
          aria-label="{{localize 'CALENDARIA.Editor.Tooltip.RestDay'}}">{{localize "CALENDARIA.Common.RestDay"}}</span>
        <span class="col-controls"></span>
      </div>

      {{#each weekdaysWithNav}}
        <div class="item weekday-item flexrow" data-key="{{this.key}}">
          <input type="text" id="editor-weekday-{{this.index}}-name" name="weekdays.{{this.key}}.name"
            value="{{this.name}}" class="col-name">
          <input type="text" id="editor-weekday-{{this.index}}-abbr" name="weekdays.{{this.key}}.abbreviation"
            value="{{this.abbreviation}}" class="col-abbr">
          <label class="col-rest checkbox">
            <input type="checkbox" name="weekdays.{{this.key}}.isRestDay" {{#if this.isRestDay}}checked{{/if}}>
          </label>

          <div class="item-controls col-controls">
            <button type="button" data-action="addWeekday" data-key="{{this.key}}" data-tooltip
              aria-label="{{localize 'CALENDARIA.Editor.Tooltip.AddWeekday'}}">
              <i class="fas fa-plus"></i>
            </button>
            <button type="button" data-action="moveWeekdayUp" data-key="{{this.key}}" {{#if this.isFirst}}disabled
              aria-disabled="true" data-tooltip aria-label="{{localize 'CALENDARIA.Editor.MoveUp.DisabledTitle'}}"
              {{else}}data-tooltip aria-label="{{localize 'CALENDARIA.Common.MoveUp'}}" {{/if}}>
              <i class="fas fa-chevron-up"></i>
            </button>
            <button type="button" data-action="moveWeekdayDown" data-key="{{this.key}}" {{#if this.isLast}}disabled
              aria-disabled="true" data-tooltip aria-label="{{localize 'CALENDARIA.Editor.MoveDown.DisabledTitle'}}"
              {{else}}data-tooltip aria-label="{{localize 'CALENDARIA.Common.MoveDown'}}" {{/if}}>
              <i class="fas fa-chevron-down"></i>
            </button>
            <button type="button" data-action="removeWeekday" data-key="{{this.key}}" data-tooltip
              aria-label="{{localize 'CALENDARIA.Editor.Tooltip.RemoveWeekday'}}">
              <i class="fas fa-trash"></i>
            </button>
          </div>
        </div>
      {{/each}}
    </div>
  </fieldset>

  <fieldset>
    <legend data-tooltip aria-label="{{localize 'CALENDARIA.Editor.Hint.WeekCycle'}}">
      {{localize "CALENDARIA.Editor.Field.WeekCycle"}}
    </legend>

    {{#if weekCycleRows.length}}
      <div class="items-list week-cycle-list" style="--cycle-days: {{weekCycleWeekdays.length}}">
        <div class="list-header flexrow">
          <span class="col-name">{{localize "CALENDARIA.Common.Name"}}</span>
          {{#each weekCycleWeekdays}}
            <span class="col-cycle-day">{{localize this}}</span>
          {{/each}}
          <span class="col-controls"></span>
        </div>

        {{#each weekCycleRows}}
          <div class="item week-cycle-row flexrow" data-key="{{this.key}}">
            <input type="text" name="weeks.cycle.{{this.key}}.name" value="{{this.name}}" class="col-name"
              placeholder="{{localize 'CALENDARIA.Editor.Default.WeekName' num=this.displayNum}}">
            {{#each this.cells}}
              <label class="col-cycle-day checkbox">
                <input type="checkbox" name="weeks.cycle.{{../key}}.days.{{this.wdKey}}" {{#if this.checked}}checked{{/if}}>
              </label>
            {{/each}}

            <div class="item-controls col-controls">
              <button type="button" data-action="addCycleRow" data-key="{{this.key}}" data-tooltip
                aria-label="{{localize 'CALENDARIA.Editor.AddCycleRow'}}">
                <i class="fas fa-plus"></i>
              </button>
              <button type="button" data-action="removeCycleRow" data-key="{{this.key}}" data-tooltip
                aria-label="{{localize 'CALENDARIA.Common.Remove'}}">
                <i class="fas fa-trash"></i>
              </button>
            </div>
          </div>
        {{/each}}
      </div>
      <p class="hint">{{localize "CALENDARIA.Editor.Hint.WeekCycle"}}</p>
    {{else}}
      <div class="empty-list">
        <p>{{localize "CALENDARIA.Editor.NoWeekCycle"}}</p>
        <button type="button" data-action="addCycleRow" data-key="null">
          <i class="fas fa-plus"></i>
          {{localize "CALENDARIA.Editor.AddCycleRow"}}
        </button>
      </div>
    {{/if}}
  </fieldset>

  <fieldset>
    <legend data-tooltip aria-label="{{localize 'CALENDARIA.Editor.Hint.NamedWeeks'}}">
      {{localize "CALENDARIA.Common.NamedWeeks"}}
    </legend>

    <div class="form-group">
      <label for="editor-weeks-type">{{localize "CALENDARIA.Editor.Field.WeeksType"}}</label>
      <div class="form-fields">
        <select id="editor-weeks-type" name="weeks.type">
          {{#each weeksTypeOptions}}
            <option value="{{this.value}}" {{#if this.selected}}selected{{/if}}>{{localize this.label}}</option>
          {{/each}}
        </select>
      </div>
      <p class="hint">{{localize "CALENDARIA.Editor.Hint.WeeksType"}}</p>
    </div>

    {{#if namedWeeksWithNav.length}}
      {{#if isYearBased}}
        <div class="form-group">
          <label for="editor-weeks-repeat">{{localize "CALENDARIA.Editor.Field.WeeksRepeat"}}</label>
          <div class="form-fields">
            <input type="checkbox" id="editor-weeks-repeat" name="weeks.repeat"
              {{#if calendar.weeks.repeat}}checked{{/if}}>
          </div>
          <p class="hint">{{localize "CALENDARIA.Editor.Hint.WeeksRepeat"}}</p>
        </div>
      {{/if}}

      <div class="items-list named-weeks-list {{#unless isYearBased}}no-week-number{{/unless}}">
        <div class="list-header flexrow">
          <span class="col-name" data-tooltip
            aria-label="{{localize 'CALENDARIA.Editor.Tooltip.WeekName'}}">{{localize "CALENDARIA.Editor.Field.WeekName"}}</span>
          <span class="col-abbr" data-tooltip
            aria-label="{{localize 'CALENDARIA.Editor.Tooltip.WeekAbbr'}}">{{localize "CALENDARIA.Common.Abbreviation"}}</span>
          {{#if isYearBased}}
            <span class="col-week-number" data-tooltip
              aria-label="{{localize 'CALENDARIA.Editor.Tooltip.WeekNumber'}}">{{localize "CALENDARIA.Common.WeekNumber"}}</span>
          {{/if}}
          <span class="col-controls"></span>
        </div>

        {{#each namedWeeksWithNav}}
          <div class="item named-week-item flexrow" data-key="{{this.key}}">
            <input type="text" id="editor-week-{{this.index}}-name" name="weeks.names.{{this.key}}.name"
              value="{{this.name}}" class="col-name">
            <input type="text" id="editor-week-{{this.index}}-abbr" name="weeks.names.{{this.key}}.abbreviation"
              value="{{this.abbreviation}}" class="col-abbr">
            {{#if ../isYearBased}}
              <input type="number" id="editor-week-{{this.index}}-number" name="weeks.names.{{this.key}}.weekNumber"
                value="{{this.weekNumber}}" min="1" max="{{../maxWeeks}}"
                class="col-week-number {{#if this.duplicateWeekNumber}}duplicate{{/if}}"
                {{#if this.duplicateWeekNumber}}data-tooltip
                aria-label="{{localize 'CALENDARIA.Editor.Tooltip.DuplicateWeekNumber'}}" {{/if}}>
            {{/if}}

            <div class="item-controls col-controls">
              <button type="button" data-action="addNamedWeek" data-key="{{this.key}}" data-tooltip
                aria-label="{{localize 'CALENDARIA.Editor.AddWeek'}}">
                <i class="fas fa-plus"></i>
              </button>
              <button type="button" data-action="removeNamedWeek" 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.NoNamedWeeks"}}</p>
        <button type="button" data-action="addNamedWeek" data-key="null">
          <i class="fas fa-plus"></i>
          {{localize "CALENDARIA.Editor.AddWeek"}}
        </button>
      </div>
    {{/if}}
  </fieldset>
</section>
