<section class="tab {{tab.cssClass}}" data-tab="{{tab.id}}" data-group="{{tab.group}}">
  <div class="template-selector">
    <div class="form-group">
      <label for="editor-calendar-select">{{localize "CALENDARIA.Common.Calendar"}}</label>
      <div class="form-fields">
        <select id="editor-calendar-select" name="calendarSelect">
          <option value="">{{localize "CALENDARIA.Editor.SelectCalendar"}}</option>
          {{#each templates}}
            <option value="{{this.id}}">{{this.name}}{{#if this.isCustom}}
                ({{localize "CALENDARIA.Editor.Custom"}}){{/if}}
            </option>
          {{/each}}
        </select>
      </div>
    </div>
    <div class="template-actions">
      <button type="button" data-action="duplicateCalendar">
        <i class="fas fa-copy"></i>
        {{localize "CALENDARIA.Editor.Duplicate"}}
      </button>
      <button type="button" data-action="createNew">
        <i class="fas fa-file-circle-plus"></i>
        {{localize "CALENDARIA.Editor.CreateNew"}}
      </button>
    </div>
  </div>

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

    <div class="form-group">
      <label for="editor-name">{{localize "CALENDARIA.Common.Name"}}</label>
      <div class="form-fields">
        <input type="text" id="editor-name" name="name" value="{{calendar.name}}"
          placeholder="{{localize 'CALENDARIA.Editor.Placeholder.Name'}}" required>
      </div>
    </div>

    <div class="form-group stacked">
      <label for="editor-description">{{localize "CALENDARIA.Common.Description"}}</label>
      <textarea id="editor-description" name="metadata.description" rows="2"
        placeholder="{{localize 'CALENDARIA.Editor.Placeholder.Description'}}">{{calendar.metadata.description}}</textarea>
    </div>
  </fieldset>

  {{#if luxonSyncAvailable}}
    <fieldset>
      <legend>{{localize "CALENDARIA.Editor.Section.LuxonSync"}}</legend>
      <div class="form-group">
        <label for="editor-luxon-theme">{{localize "CALENDARIA.Editor.Field.LuxonSyncTheme"}}</label>
        <div class="form-fields">
          <select id="editor-luxon-theme" name="metadata.luxonSync.theme">
            <option value="">{{localize "CALENDARIA.Editor.Field.LuxonSyncNone"}}</option>
            <option value="AR" {{#if (eq calendar.metadata.luxonSync.theme "AR")}}selected{{/if}}>
              {{localize "PF2E.SETTINGS.WorldClock.DateThemes.AR"}}
            </option>
            <option value="IC" {{#if (eq calendar.metadata.luxonSync.theme "IC")}}selected{{/if}}>
              {{localize "PF2E.SETTINGS.WorldClock.DateThemes.IC"}}
            </option>
            <option value="AG" {{#if (eq calendar.metadata.luxonSync.theme "AG")}}selected{{/if}}>
              {{localize "PF2E.SETTINGS.WorldClock.DateThemes.AG"}}
            </option>
            <option value="CE" {{#if (eq calendar.metadata.luxonSync.theme "CE")}}selected{{/if}}>
              {{localize "PF2E.SETTINGS.WorldClock.DateThemes.CE"}}
            </option>
          </select>
        </div>
        <p class="hint">{{localize "CALENDARIA.Editor.Hint.LuxonSync"}}</p>
      </div>
    </fieldset>
  {{/if}}
</section>
