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

    {{#if erasWithNav.length}}
      <div class="items-list eras-list">
        <div class="list-header flexrow">
          <span class="col-name" data-tooltip
            aria-label="{{localize 'CALENDARIA.Editor.Tooltip.EraName'}}">{{localize "CALENDARIA.Common.Name"}}</span>
          <span class="col-abbr" data-tooltip
            aria-label="{{localize 'CALENDARIA.Editor.Tooltip.EraAbbr'}}">{{localize "CALENDARIA.Common.Abbreviation"}}</span>
          <span class="col-start-year" data-tooltip
            aria-label="{{localize 'CALENDARIA.Editor.Tooltip.EraStartYear'}}">{{localize "CALENDARIA.Editor.Column.StartYear"}}</span>
          <span class="col-end-year" data-tooltip
            aria-label="{{localize 'CALENDARIA.Editor.Tooltip.EraEndYear'}}">{{localize "CALENDARIA.Editor.Column.EndYear"}}</span>
          <span class="col-controls"></span>
        </div>

        {{#each erasWithNav}}
          <div class="item era-item" data-key="{{this.key}}">
            <div class="era-main flexrow">
              <input type="text" id="editor-era-{{this.index}}-name" name="eras.{{this.key}}.name" value="{{this.name}}"
                class="col-name" placeholder="{{localize 'CALENDARIA.Editor.Placeholder.EraName'}}">
              <input type="text" id="editor-era-{{this.index}}-abbr" name="eras.{{this.key}}.abbreviation"
                value="{{this.abbreviation}}" class="col-abbr"
                placeholder="{{localize 'CALENDARIA.Editor.Placeholder.EraAbbr'}}">
              <input type="number" id="editor-era-{{this.index}}-start" name="eras.{{this.key}}.startYear"
                value="{{this.startYear}}" class="col-start-year" placeholder="1">
              <input type="number" id="editor-era-{{this.index}}-end" name="eras.{{this.key}}.endYear"
                value="{{this.endYear}}" class="col-end-year"
                placeholder="{{localize 'CALENDARIA.Editor.Placeholder.Ongoing'}}">

              <div class="item-controls col-controls">
                <button type="button" data-action="addEra" data-key="{{this.key}}" data-tooltip
                  aria-label="{{localize 'CALENDARIA.Editor.Tooltip.AddEra'}}">
                  <i class="fas fa-plus"></i>
                </button>
                <button type="button" data-action="removeEra" data-key="{{this.key}}" data-tooltip
                  aria-label="{{localize 'CALENDARIA.Editor.Tooltip.RemoveEra'}}">
                  <i class="fas fa-trash"></i>
                </button>
              </div>
            </div>
          </div>
        {{/each}}
      </div>
    {{else}}
      <div class="empty-list">
        <p>{{localize "CALENDARIA.Editor.NoEras"}}</p>
        <button type="button" data-action="addEra" data-key="">
          <i class="fas fa-plus"></i>
          {{localize "CALENDARIA.Editor.AddEra"}}
        </button>
      </div>
    {{/if}}
  </fieldset>
</section>
