<section class="tab {{tab.cssClass}}" data-tab="{{tab.id}}" data-group="{{tab.group}}">

  <fieldset class="theme-colors-fieldset" data-section="theme">
    <legend>
      {{localize "CALENDARIA.SettingsPanel.Section.Theme"}}
      <button type="button" class="reset-section" data-action="resetSection" data-section="theme" data-tooltip
        aria-label="{{localize "CALENDARIA.SettingsPanel.ResetSection.Tooltip"}}"><i class="fas fa-undo"></i></button>
    </legend>

    {{#if isGM}}
      <div class="form-group">
        <label for="forceTheme">{{localize "CALENDARIA.Settings.ForceTheme.Name"}}</label>
        <div class="form-fields">
          <select id="forceTheme" name="forceTheme">
            {{#each forceThemeOptions}}
              <option value="{{this.value}}" {{#if this.selected}}selected{{/if}}>{{this.label}}</option>
            {{/each}}
          </select>
        </div>
        <p class="hint">{{localize "CALENDARIA.Settings.ForceTheme.Hint"}}</p>
      </div>
    {{/if}}

    {{#if themeForced}}
      {{#unless isGM}}
        <div class="info-box">
          <i class="fas fa-info-circle"></i>
          <p>{{localize "CALENDARIA.Settings.ForceTheme.PlayerMessage"}}</p>
        </div>
      {{/unless}}
    {{/if}}

    <div class="form-group theme-selector">
      <label for="themeMode">{{localize "CALENDARIA.ThemeEditor.PresetSelect"}}</label>
      <div class="form-fields">
        <select id="themeMode" name="themeMode" {{#if themeForced}}disabled{{/if}}>
          <optgroup label="{{localize 'CALENDARIA.ThemeEditor.PresetGroup'}}">
            {{#each builtInThemes}}
              <option value="{{this.key}}" {{#if this.selected}}selected{{/if}}>{{this.label}}</option>
            {{/each}}
          </optgroup>
          {{#if customThemes.length}}
            <optgroup label="{{localize 'CALENDARIA.ThemeEditor.CustomGroup'}}">
              {{#each customThemes}}
                <option value="{{this.key}}" {{#if this.selected}}selected{{/if}}>{{this.label}}</option>
              {{/each}}
            </optgroup>
          {{/if}}
        </select>
        {{#unless themeForced}}
          <button type="button" data-action="customizeTheme" data-tooltip
            aria-label="{{localize 'CALENDARIA.ThemeEditor.Customize'}}">
            <i class="fas fa-palette"></i>
          </button>
        {{/unless}}
        {{#if canDeleteTheme}}
          <button type="button" class="theme-delete-btn" data-action="deleteCustomTheme" data-tooltip
            aria-label="{{localize 'CALENDARIA.ThemeEditor.DeleteCustom.Title'}}">
            <i class="fas fa-trash"></i>
          </button>
        {{/if}}
        <button type="button" data-action="importTheme" data-tooltip
          aria-label="{{localize 'CALENDARIA.Common.Import'}}">
          <i class="fas fa-upload"></i>
        </button>
        <button type="button" data-action="exportTheme" data-tooltip
          aria-label="{{localize 'CALENDARIA.Common.Export'}}">
          <i class="fas fa-download"></i>
        </button>
      </div>
    </div>
    {{#if isCustomThemeActive}}
      <p class="hint">{{localize "CALENDARIA.ThemeEditor.CustomHint" name=activeCustomThemeName}}</p>
    {{else}}
      <p class="hint">{{localize "CALENDARIA.ThemeEditor.PresetHint"}}</p>
    {{/if}}

    {{#if showCustomColors}}
      <div class="custom-theme-editor">
        <div class="color-table">
          {{#each themeCategories}}
            <div class="color-category-section">
              <div class="color-category-header">{{localize this.label}}</div>
              <div class="color-table-header">
                <span class="col-usage" data-tooltip
                  aria-label="{{localize 'CALENDARIA.ThemeEditor.Header.UsageHint'}}">{{localize "CALENDARIA.ThemeEditor.Header.Usage"}}</span>
                <span class="col-color" data-tooltip
                  aria-label="{{localize 'CALENDARIA.ThemeEditor.Header.ColorHint'}}">{{localize "CALENDARIA.Common.Color"}}</span>
                <span class="col-reset" data-tooltip
                  aria-label="{{localize 'CALENDARIA.ThemeEditor.Header.ResetHint'}}">{{localize "CALENDARIA.Common.Reset"}}</span>
              </div>
              {{#each this.colors}}
                <div class="color-table-row">
                  <span class="col-usage">{{localize this.label}}</span>
                  <color-picker class="col-color" name="colors.{{this.key}}" value="{{this.value}}"
                    data-key="{{this.key}}"></color-picker>
                  <button type="button" class="col-reset reset-color" data-action="resetColor" data-key="{{this.key}}"
                    data-tooltip aria-label="{{localize 'CALENDARIA.Common.Reset'}}" {{#unless this.isCustom}}disabled
                    aria-disabled="true" data-tooltip
                    aria-label="{{localize 'CALENDARIA.ThemeEditor.Header.ResetDisabledTitle'}}" {{/unless}}>
                    <i class="fas fa-undo"></i>
                  </button>
                </div>
              {{/each}}
            </div>
          {{/each}}
        </div>
      </div>
    {{/if}}
  </fieldset>

</section>
