<section class="tab {{tab.cssClass}}" data-tab="{{tab.id}}" data-group="{{tab.group}}">
  <fieldset class="welcome-section" data-section="welcome">
    <legend>{{localize "CALENDARIA.SettingsPanel.Section.Welcome"}}</legend>
    <div class="welcome-content">
      <p class="welcome-text">{{localize "CALENDARIA.SettingsPanel.Welcome.Greeting"}}</p>
      <p class="welcome-text">{{localize "CALENDARIA.SettingsPanel.Welcome.Description"}}</p>
      <p class="welcome-text">{{localize "CALENDARIA.SettingsPanel.Welcome.GettingStarted"}}</p>
      <p class="welcome-text">{{localize "CALENDARIA.SettingsPanel.Welcome.Closing"}}</p>
    </div>
  </fieldset>
  {{#if recentSettings.length}}
    <fieldset class="recent-settings" data-section="recent-settings">
      <legend>{{localize "CALENDARIA.SettingsPanel.Section.RecentSettings"}}</legend>
      <div class="recent-list">
        {{#each recentSettings}}
          <a class="recent-item" data-action="navigateToSetting" data-tab="{{this.tab}}"
            data-fieldset="{{this.fieldset}}">
            <span class="recent-label">{{this.label}}</span>
            <span class="recent-time">{{this.timeAgo}}</span>
          </a>
        {{/each}}
      </div>
    </fieldset>
  {{/if}}
  <fieldset data-section="active-calendar">
    <legend>{{localize "CALENDARIA.Settings.ActiveCalendar.Name"}}</legend>
    <div class="form-group">
      <label for="activeCalendar">{{localize "CALENDARIA.Settings.ActiveCalendar.Name"}}</label>
      <div class="form-fields">
        <select id="activeCalendar" name="activeCalendar" {{#unless canChangeCalendar}}disabled aria-disabled="true"
          data-tooltip aria-label="{{localize "CALENDARIA.Settings.ActiveCalendar.DisabledTitle"}}" {{/unless}}>
          {{#each calendarOptions}}
            <option value="{{this.value}}" {{#if this.selected}}selected{{/if}}>
              {{this.label}}
              {{#if this.isCustom}}({{localize "CALENDARIA.Editor.Custom"}}){{/if}}
              {{#if this.incompatible}}({{localize "CALENDARIA.Settings.ActiveCalendar.LuxonLikelyIncompatible"}}){{/if}}
            </option>
          {{/each}}
        </select>
      </div>
      <p class="hint">{{localize "CALENDARIA.Settings.ActiveCalendar.Hint"}}</p>
      {{#if luxonSyncRequired}}
        <p class="notification error" role="alert">{{luxonSyncNotice}}</p>
      {{/if}}
    </div>
    {{#if isGM}}
      <div class="button-row">
        <button type="button" data-action="openCalendarEditor">
          <i class="fas fa-calendar-plus"></i>
          {{localize "CALENDARIA.Settings.CalendarEditor.Label"}}
        </button>
        <button type="button" data-action="openImporter">
          <i class="fas fa-file-import"></i>
          {{localize "CALENDARIA.Settings.Importer.Label"}}
        </button>
        <button type="button" data-action="openSetDateDialog">
          <i class="fas fa-clock"></i>
          {{localize "CALENDARIA.Settings.SetDate.Label"}}
        </button>
      </div>
    {{/if}}
  </fieldset>
  {{#if showEquivalentDatesSection}}
    <fieldset data-section="equivalent-dates">
      <legend>{{localize "CALENDARIA.Settings.EquivalentDates.Legend"}}</legend>
      <div class="form-group">
        <label>{{localize "CALENDARIA.Settings.EquivalentDateCalendars.Name"}}</label>
        <div class="form-fields">
          <multi-select name="equivalentDateCalendars">
            {{#each equivalentDateOptions}}
              <option value="{{this.id}}" {{#if this.checked}}selected{{/if}}>{{this.label}}</option>
            {{/each}}
          </multi-select>
        </div>
        <p class="hint">{{localize "CALENDARIA.Settings.EquivalentDateCalendars.Hint"}}</p>
      </div>
    </fieldset>
  {{/if}}
</section>
