<section class="tab {{tab.cssClass}}" data-tab="{{tab.id}}" data-group="{{tab.group}}">
  <fieldset>
    <legend data-tooltip aria-label="{{localize 'CALENDARIA.Editor.SectionTooltip.DateFormats'}}">
      {{localize "CALENDARIA.Common.DateFormats"}}
      <button type="button" class="legend-help" data-action="showTokenReference" data-context-type="all" data-tooltip
        aria-label="{{localize 'CALENDARIA.TokenReference.Title'}}">
        <i class="fas fa-circle-question"></i>
      </button>
    </legend>

    <div class="form-group">
      <label for="editor-date-format-short">{{localize "CALENDARIA.Editor.Field.DateFormatShort"}}</label>
      <div class="form-fields">
        <input type="text" id="editor-date-format-short" name="dateFormats.short" value="{{calendar.dateFormats.short}}"
          class="format-input">
      </div>
      <p class="hint format-preview" data-format-field="short"></p>
    </div>

    <div class="form-group">
      <label for="editor-date-format-long">{{localize "CALENDARIA.Editor.Field.DateFormatLong"}}</label>
      <div class="form-fields">
        <input type="text" id="editor-date-format-long" name="dateFormats.long" value="{{calendar.dateFormats.long}}"
          class="format-input">
      </div>
      <p class="hint format-preview" data-format-field="long"></p>
    </div>

    <div class="form-group">
      <label for="editor-date-format-full">{{localize "CALENDARIA.Editor.Field.DateFormatFull"}}</label>
      <div class="form-fields">
        <input type="text" id="editor-date-format-full" name="dateFormats.full" value="{{calendar.dateFormats.full}}"
          class="format-input">
      </div>
      <p class="hint format-preview" data-format-field="full"></p>
    </div>

    <div class="form-group">
      <label for="editor-date-format-crossCalendar">{{localize "CALENDARIA.Editor.Field.DateFormatCrossCalendar"}}</label>
      <div class="form-fields">
        <input type="text" id="editor-date-format-crossCalendar" name="dateFormats.crossCalendar"
          value="{{calendar.dateFormats.crossCalendar}}" class="format-input">
      </div>
      <p class="hint">{{localize "CALENDARIA.Editor.Field.DateFormatCrossCalendarHint"}}</p>
      <p class="hint format-preview" data-format-field="crossCalendar"></p>
    </div>

    <div class="form-group">
      <label for="editor-date-format-time">{{localize "CALENDARIA.Editor.Field.DateFormatTime"}}</label>
      <div class="form-fields">
        <input type="text" id="editor-date-format-time" name="dateFormats.time" value="{{calendar.dateFormats.time}}"
          class="format-input">
      </div>
      <p class="hint format-preview" data-format-field="time"></p>
    </div>

    <div class="form-group">
      <label for="editor-date-format-time12">{{localize "CALENDARIA.Editor.Field.DateFormatTime12"}}</label>
      <div class="form-fields">
        <input type="text" id="editor-date-format-time12" name="dateFormats.time12"
          value="{{calendar.dateFormats.time12}}" class="format-input">
      </div>
      <p class="hint format-preview" data-format-field="time12"></p>
    </div>

    <div class="form-group">
      <label for="editor-date-format-weekHeader">{{localize "CALENDARIA.Common.WeekViewHeader"}}</label>
      <div class="form-fields">
        <input type="text" id="editor-date-format-weekHeader" name="dateFormats.weekHeader"
          value="{{calendar.dateFormats.weekHeader}}" class="format-input">
      </div>
      <p class="hint format-preview" data-format-field="weekHeader"></p>
    </div>

    <div class="form-group">
      <label for="editor-date-format-yearHeader">{{localize "CALENDARIA.Common.YearViewHeader"}}</label>
      <div class="form-fields">
        <input type="text" id="editor-date-format-yearHeader" name="dateFormats.yearHeader"
          value="{{calendar.dateFormats.yearHeader}}" class="format-input">
      </div>
      <p class="hint format-preview" data-format-field="yearHeader"></p>
    </div>

    <div class="form-group">
      <label for="editor-date-format-yearLabel">{{localize "CALENDARIA.Editor.Field.DateFormatYearLabel"}}</label>
      <div class="form-fields">
        <input type="text" id="editor-date-format-yearLabel" name="dateFormats.yearLabel"
          value="{{calendar.dateFormats.yearLabel}}" class="format-input">
      </div>
      <p class="hint format-preview" data-format-field="yearLabel"></p>
    </div>
  </fieldset>
</section>
