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

    <div class="form-group">
      <label for="editor-year-zero">{{localize "CALENDARIA.Editor.Field.YearZero"}}</label>
      <div class="form-fields">
        <input type="number" id="editor-year-zero" name="years.yearZero" value="{{calendar.years.yearZero}}" step="1">
      </div>
      <p class="hint">{{localize "CALENDARIA.Editor.Hint.YearZero"}}</p>
    </div>

    <div class="form-group">
      <label for="editor-epoch-day-offset">{{localize "CALENDARIA.Editor.Field.EpochDayOffset"}}</label>
      <div class="form-fields">
        <input type="number" id="editor-epoch-day-offset" name="epochDayOffset" value="{{calendar.epochDayOffset}}" step="1">
      </div>
      <p class="hint">{{localize "CALENDARIA.Editor.Hint.EpochDayOffset"}}</p>
    </div>

    <div class="form-group">
      <label for="editor-first-weekday">{{localize "CALENDARIA.Editor.Field.YearZeroWeekday"}}</label>
      <div class="form-fields">
        <select id="editor-first-weekday" name="years.firstWeekday">
          {{#each weekdayOptions}}
            <option value="{{this.value}}" {{#if this.selected}}selected{{/if}}>{{this.label}}</option>
          {{/each}}
        </select>
      </div>
      <p class="hint">{{localize "CALENDARIA.Editor.Hint.YearZeroWeekday"}}</p>
    </div>

    <div class="form-group">
      <label for="editor-reset-weekdays">{{localize "CALENDARIA.Editor.Field.ResetWeekdays"}}</label>
      <div class="form-fields">
        <input type="checkbox" id="editor-reset-weekdays" name="years.resetWeekdays"
          {{#if calendar.years.resetWeekdays}}checked{{/if}}>
      </div>
      <p class="hint">{{localize "CALENDARIA.Editor.Hint.ResetWeekdays"}}</p>
    </div>

    <div class="form-group">
      <label for="editor-allow-negative">{{localize "CALENDARIA.Editor.Field.AllowNegativeYears"}}</label>
      <div class="form-fields">
        <input type="checkbox" id="editor-allow-negative" name="years.allowNegativeYears"
          {{#if calendar.years.allowNegativeYears}}checked{{/if}}>
      </div>
      <p class="hint">{{localize "CALENDARIA.Editor.Hint.AllowNegativeYears"}}</p>
    </div>
  </fieldset>

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

    <div class="form-group">
      <label for="editor-leap-rule">{{localize "CALENDARIA.Editor.Field.LeapRule"}}</label>
      <div class="form-fields">
        <select id="editor-leap-rule" name="leapYearConfig.rule">
          {{#each leapRuleOptions}}
            <option value="{{this.value}}" {{#if this.selected}}selected{{/if}}>{{localize this.label}}</option>
          {{/each}}
        </select>
      </div>
      <p class="hint">{{localize "CALENDARIA.Editor.Hint.LeapRule"}}</p>
    </div>

    <div class="standard-form" data-leap-rule="simple" {{#unless showLeapSimple}}style="display: none;" {{/unless}}>
      <div class="form-group">
        <label for="editor-leap-interval">{{localize "CALENDARIA.Editor.Field.LeapInterval"}}</label>
        <div class="form-fields">
          <input type="number" id="editor-leap-interval" name="leapYearConfig.interval" value="{{leapInterval}}"
            step="1" min="1">
        </div>
        <p class="hint">{{localize "CALENDARIA.Editor.Hint.LeapInterval"}}</p>
      </div>

      <div class="form-group">
        <label for="editor-leap-start-simple">{{localize "CALENDARIA.Editor.Field.LeapStart"}}</label>
        <div class="form-fields">
          <input type="number" id="editor-leap-start-simple" name="leapYearConfig.start" value="{{leapStart}}" step="1">
        </div>
        <p class="hint">{{localize "CALENDARIA.Editor.Hint.LeapStart"}}</p>
      </div>
    </div>

    <div class="standard-form" data-leap-rule="custom" {{#unless showLeapCustom}}style="display: none;" {{/unless}}>
      <div class="form-group">
        <label for="editor-leap-pattern">{{localize "CALENDARIA.Editor.Field.LeapPattern"}}</label>
        <div class="form-fields">
          <input type="text" id="editor-leap-pattern" name="leapYearConfig.pattern" value="{{leapPattern}}"
            placeholder="400,!100,4">
        </div>
        <p class="hint">{{localize "CALENDARIA.Editor.Hint.LeapPattern"}}</p>
      </div>

      <div class="form-group">
        <label for="editor-leap-start-custom">{{localize "CALENDARIA.Editor.Field.LeapStart"}}</label>
        <div class="form-fields">
          <input type="number" id="editor-leap-start-custom" name="leapYearConfig.start" value="{{leapStart}}" step="1">
        </div>
        <p class="hint">{{localize "CALENDARIA.Editor.Hint.LeapStart"}}</p>
      </div>
    </div>

    <div class="standard-form" data-leap-rule="gregorian" {{#unless showLeapGregorian}}style="display: none;"
      {{/unless}}>
      <p class="hint gregorian-explanation">{{localize "CALENDARIA.Editor.Hint.LeapGregorian"}}</p>
    </div>

    <div class="standard-form" data-leap-rule="cycle" {{#unless showLeapCycle}}style="display: none;" {{/unless}}>
      <div class="form-group">
        <label for="editor-leap-cycle-period">{{localize "CALENDARIA.Editor.Field.LeapCyclePeriod"}}</label>
        <div class="form-fields">
          <input type="number" id="editor-leap-cycle-period" name="leapYearConfig.cyclePeriod" value="{{leapCyclePeriod}}" step="1" min="1">
        </div>
        <p class="hint">{{localize "CALENDARIA.Editor.Hint.LeapCyclePeriod"}}</p>
      </div>

      <div class="form-group">
        <label for="editor-leap-cycle-offsets">{{localize "CALENDARIA.Editor.Field.LeapCycleOffsets"}}</label>
        <div class="form-fields">
          <input type="text" id="editor-leap-cycle-offsets" name="leapYearConfig.cycleOffsets" value="{{leapCycleOffsets}}" placeholder="2,5,7,10,13,16,18,21,24,26,29">
        </div>
        <p class="hint">{{localize "CALENDARIA.Editor.Hint.LeapCycleOffsets"}}</p>
      </div>
    </div>
  </fieldset>

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

    {{#if namedYears.length}}
      <div class="items-list named-years-list">
        <div class="list-header flexrow">
          <span>{{localize "CALENDARIA.Common.Name"}}</span>
          <span>{{localize "CALENDARIA.Common.Year"}}</span>
          <span></span>
        </div>
        {{#each namedYears}}
          <div class="item flexrow" data-index="{{this.index}}">
            <input type="text" name="years.names.{{this.index}}.name" value="{{this.name}}"
              placeholder="{{localize 'CALENDARIA.Common.Name'}}">
            <input type="number" name="years.names.{{this.index}}.year" value="{{this.year}}" step="1">
            <div class="item-controls">
              <button type="button" data-action="addNamedYear" data-index="{{this.index}}"
                data-tooltip="{{localize 'CALENDARIA.Common.Add'}}">
                <i class="fas fa-plus"></i>
              </button>
              <button type="button" data-action="removeNamedYear" data-index="{{this.index}}"
                data-tooltip="{{localize 'CALENDARIA.Common.Delete'}}">
                <i class="fas fa-trash"></i>
              </button>
            </div>
          </div>
        {{/each}}
      </div>
    {{else}}
      <div class="empty-list">
        <p>{{localize "CALENDARIA.Editor.NoNamedYears"}}</p>
        <button type="button" data-action="addNamedYear" data-index="-1">
          <i class="fas fa-plus"></i>
          {{localize "CALENDARIA.Editor.AddNamedYear"}}
        </button>
      </div>
    {{/if}}
  </fieldset>
</section>
