<section class="tab {{tab.cssClass}}" data-tab="{{tab.id}}" data-group="{{tab.group}}">
  {{#unless monthsWithNav.length}}
    <div class="monthless-notice notification info">
      <div class="notice-content">
        <strong>{{localize "CALENDARIA.Editor.MonthlessMode.Title"}}</strong>
        <p>{{localize "CALENDARIA.Editor.MonthlessMode.Description"}}</p>
        <ul>
          <li>{{localize "CALENDARIA.Editor.MonthlessMode.BulletNavigation"}}</li>
          <li>{{localize "CALENDARIA.Editor.MonthlessMode.BulletFormat"}}</li>
          <li>{{localize "CALENDARIA.Editor.MonthlessMode.BulletSeasons"}}</li>
        </ul>
        <p class="hint">{{localize "CALENDARIA.Editor.MonthlessMode.Hint"}}</p>
      </div>
    </div>
    <fieldset>
      <legend>{{localize "CALENDARIA.Editor.DaysPerYear.Label"}}</legend>
      <div class="form-group">
        <label for="editor-days-per-year">{{localize "CALENDARIA.Editor.DaysPerYear.Label"}}</label>
        <div class="form-fields">
          <input type="number" id="editor-days-per-year" name="days.daysPerYear"
            value="{{calendar.days.daysPerYear}}" min="1" step="1">
        </div>
        <p class="hint">{{localize "CALENDARIA.Editor.DaysPerYear.Hint"}}</p>
      </div>
    </fieldset>
  {{/unless}}
  <fieldset>
    <legend data-tooltip aria-label="{{localize 'CALENDARIA.Editor.SectionTooltip.Months'}}">
      {{localize "CALENDARIA.Common.Months"}}
    </legend>
    <div class="items-list months-list">
      {{#if monthsWithNav.length}}
        <div class="list-header flexrow">
          <span class="col-name" data-tooltip
            aria-label="{{localize 'CALENDARIA.Editor.Tooltip.MonthName'}}">{{localize "CALENDARIA.Common.Name"}}</span>
          <span class="col-abbr" data-tooltip
            aria-label="{{localize 'CALENDARIA.Editor.Tooltip.MonthAbbr'}}">{{localize "CALENDARIA.Common.Abbreviation"}}</span>
          <span class="col-days" data-tooltip
            aria-label="{{localize 'CALENDARIA.Editor.Tooltip.MonthDays'}}">{{localize "CALENDARIA.Common.Days"}}</span>
          <span class="col-leap" data-tooltip
            aria-label="{{localize 'CALENDARIA.Editor.Tooltip.MonthLeap'}}">{{localize "CALENDARIA.Editor.Column.Leap"}}</span>
          <span class="col-start-weekday" data-tooltip
            aria-label="{{localize 'CALENDARIA.Editor.Tooltip.StartingWeekday'}}">{{localize "CALENDARIA.Editor.Column.StartWeekday"}}</span>
          <span class="col-type" data-tooltip
            aria-label="{{localize 'CALENDARIA.Editor.Tooltip.MonthType'}}">{{localize "CALENDARIA.Common.Type"}}</span>
          <span class="col-controls"></span>
        </div>
      {{/if}}

      {{#each monthsWithNav}}
        <div class="item month-item" data-key="{{this.key}}">
          <div class="month-row-main flexrow">
            <input type="text" id="editor-month-{{this.index}}-name" name="months.{{this.key}}.name"
              value="{{this.name}}" class="col-name">
            <input type="text" id="editor-month-{{this.index}}-abbr" name="months.{{this.key}}.abbreviation"
              value="{{this.abbreviation}}" class="col-abbr">
            <input type="number" id="editor-month-{{this.index}}-days" name="months.{{this.key}}.days"
              value="{{this.days}}" min="0" class="col-days">
            <input type="number" id="editor-month-{{this.index}}-leap" name="months.{{this.key}}.leapDays"
              value="{{this.leapDays}}" min="0" class="col-leap">
            <select id="editor-month-{{this.index}}-weekday" name="months.{{this.key}}.startingWeekday"
              class="col-start-weekday" {{#if @root.hasActiveCycle}}disabled data-tooltip
              aria-label="{{localize 'CALENDARIA.Editor.Tooltip.StartingWeekdayCycleDisabled'}}"{{/if}}>
              <option value="" {{#unless this.hasStartingWeekday}}selected{{/unless}}>
                {{localize "CALENDARIA.Editor.StartingWeekday.Auto"}}
              </option>
              {{#each this.startingWeekdayOptions}}
                <option value="{{this.value}}" {{#if this.selected}}selected{{/if}}>{{this.label}}</option>
              {{/each}}
            </select>
            <select id="editor-month-{{this.index}}-type" name="months.{{this.key}}.type" class="col-type">
              {{#each this.typeOptions}}
                <option value="{{this.value}}" {{#if this.selected}}selected{{/if}}>{{localize this.label}}</option>
              {{/each}}
            </select>
            <div class="item-controls col-controls">
              <button type="button" data-action="toggleCustomWeekdays" data-key="{{this.key}}"
                class="{{#if this.hasCustomWeekdays}}toggled{{/if}}" data-tooltip
                aria-label="{{#if this.hasCustomWeekdays}}{{localize 'CALENDARIA.Editor.Month.CustomWeekdaysConfigured'}}{{else}}{{localize 'CALENDARIA.Editor.Month.CustomWeekdaysNotConfigured'}}{{/if}}">
                <i class="fas fa-calendar-week"></i>
              </button>
              <button type="button" data-action="addMonth" data-key="{{this.key}}" data-tooltip
                aria-label="{{localize 'CALENDARIA.Editor.Tooltip.AddMonth'}}">
                <i class="fas fa-plus"></i>
              </button>
              <button type="button" data-action="moveMonthUp" 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="moveMonthDown" 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="removeMonth" data-key="{{this.key}}" data-tooltip
                aria-label="{{localize 'CALENDARIA.Editor.Tooltip.RemoveMonth'}}">
                <i class="fas fa-trash"></i>
              </button>
            </div>
            <input type="hidden" name="months.{{this.key}}.hasCustomWeekdays"
              value="{{#if this.hasCustomWeekdays}}true{{/if}}">
            {{#if this.hasCustomWeekdays}}
              {{#each this.customWeekdays}}
                <input type="hidden" name="months.{{../key}}.weekdays.{{@key}}.name" value="{{this.name}}">
                <input type="hidden" name="months.{{../key}}.weekdays.{{@key}}.abbreviation"
                  value="{{this.abbreviation}}">
                {{#if this.isRestDay}}
                  <input type="hidden" name="months.{{../key}}.weekdays.{{@key}}.isRestDay" value="true">
                {{/if}}
              {{/each}}
            {{/if}}
          </div>
        </div>
      {{/each}}
    </div>
    {{#unless monthsWithNav.length}}
      <div class="add-first-item">
        <button type="button" data-action="addMonth" data-key="-1" class="add-month-btn">
          <i class="fas fa-plus"></i> {{localize "CALENDARIA.Common.Add"}} {{localize "CALENDARIA.Common.Month"}}
        </button>
      </div>
    {{/unless}}
  </fieldset>
</section>
