<section class="tab {{tab.cssClass}}" data-tab="{{tab.id}}" data-group="{{tab.group}}">
  <div class="form-group">
    <label for="editor-cycle-format" data-tooltip aria-label="{{localize 'CALENDARIA.Common.CycleFormatHint'}}">
      {{localize "CALENDARIA.Editor.Field.CycleFormat"}}
    </label>
    <input type="text" id="editor-cycle-format" name="cycleFormat" value="{{cycleFormat}}"
      placeholder="{{localize 'CALENDARIA.Editor.Placeholder.CycleFormat'}}">
    <p class="hint">{{localize "CALENDARIA.Common.CycleFormatHint"}}</p>
  </div>

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

    {{#if cyclesWithNav.length}}
      <div class="items-list cycles-list">
        {{#each cyclesWithNav}}
          <div class="item cycle-item" data-key="{{this.key}}">
            <div class="cycle-header-grid">
              <div class="grid-col col-name">
                <label for="editor-cycle-{{this.index}}-name" data-tooltip
                  aria-label="{{localize 'CALENDARIA.Editor.Tooltip.CycleName'}}">
                  {{localize "CALENDARIA.Common.Name"}}
                </label>
                <input type="text" id="editor-cycle-{{this.index}}-name" name="cycles.{{this.key}}.name"
                  value="{{this.name}}">
              </div>
              <div class="grid-col col-length">
                <label for="editor-cycle-{{this.index}}-length" data-tooltip
                  aria-label="{{localize 'CALENDARIA.Editor.Tooltip.CyclePeriod'}}">
                  {{localize "CALENDARIA.Editor.Field.Length"}}
                </label>
                <input type="number" id="editor-cycle-{{this.index}}-length" name="cycles.{{this.key}}.length"
                  value="{{this.length}}" min="1" step="1">
              </div>
              <div class="grid-col col-offset">
                <label for="editor-cycle-{{this.index}}-offset" data-tooltip
                  aria-label="{{localize 'CALENDARIA.Editor.Tooltip.CycleOffset'}}">
                  {{localize "CALENDARIA.Common.Offset"}}
                </label>
                <input type="number" id="editor-cycle-{{this.index}}-offset" name="cycles.{{this.key}}.offset"
                  value="{{this.offset}}" step="1">
              </div>
              <div class="grid-col col-based-on">
                <label for="editor-cycle-{{this.index}}-basedOn" data-tooltip
                  aria-label="{{localize 'CALENDARIA.Editor.Tooltip.CycleBasedOn'}}">
                  {{localize "CALENDARIA.Editor.Field.BasedOn"}}
                </label>
                <select id="editor-cycle-{{this.index}}-basedOn" name="cycles.{{this.key}}.basedOn">
                  {{#each this.basedOnOptions}}
                    <option value="{{this.value}}" {{#if this.selected}}selected{{/if}}>{{localize this.label}}</option>
                  {{/each}}
                </select>
              </div>
              <div class="grid-col col-controls">
                <label>&nbsp;</label>
                <div class="item-controls">
                  <button type="button" data-action="addCycle" data-key="{{this.key}}" data-tooltip
                    aria-label="{{localize 'CALENDARIA.Editor.Tooltip.AddCycle'}}">
                    <i class="fas fa-plus"></i>
                  </button>
                  <button type="button" data-action="removeCycle" data-key="{{this.key}}" data-tooltip
                    aria-label="{{localize 'CALENDARIA.Editor.Tooltip.RemoveCycle'}}">
                    <i class="fas fa-trash"></i>
                  </button>
                </div>
              </div>
            </div>

            <fieldset class="cycle-stages-section">
              <legend data-tooltip aria-label="{{localize 'CALENDARIA.Editor.SectionTooltip.CycleStages'}}">
                {{localize "CALENDARIA.Editor.Section.CycleStages"}} ({{this.stagesWithIndex.length}})
              </legend>

              {{#if this.stagesWithIndex.length}}
                <div class="stages-list">
                  {{#each this.stagesWithIndex}}
                    <div class="stage-item flexrow" data-stage-key="{{this.stageKey}}">
                      <input type="text" name="cycles.{{this.cycleKey}}.stages.{{this.stageKey}}.name"
                        value="{{this.name}}" class="col-stage-name"
                        placeholder="{{localize 'CALENDARIA.Editor.Placeholder.StageName'}}">
                      <div class="item-controls">
                        <button type="button" data-action="addCycleStage" data-cycle-key="{{this.cycleKey}}"
                          data-tooltip aria-label="{{localize 'CALENDARIA.Editor.Tooltip.AddStage'}}">
                          <i class="fas fa-plus"></i>
                        </button>
                        <button type="button" data-action="removeCycleStage" data-cycle-key="{{this.cycleKey}}"
                          data-stage-key="{{this.stageKey}}" data-tooltip
                          aria-label="{{localize 'CALENDARIA.Editor.Tooltip.RemoveStage'}}">
                          <i class="fas fa-trash"></i>
                        </button>
                      </div>
                    </div>
                  {{/each}}
                </div>
              {{else}}
                <div class="empty-list">
                  <p>{{localize "CALENDARIA.Editor.NoStages"}}</p>
                  <button type="button" data-action="addCycleStage" data-cycle-key="{{this.key}}">
                    <i class="fas fa-plus"></i> {{localize "CALENDARIA.Editor.AddStage"}}
                  </button>
                </div>
              {{/if}}
            </fieldset>
          </div>
        {{/each}}
      </div>
    {{else}}
      <div class="empty-list">
        <p>{{localize "CALENDARIA.Editor.NoCycles"}}</p>
        <button type="button" data-action="addCycle" data-key="">
          <i class="fas fa-plus"></i>
          {{localize "CALENDARIA.Editor.AddCycle"}}
        </button>
      </div>
    {{/if}}
  </fieldset>
</section>
