<section class="tab {{tab.cssClass}}" data-tab="{{tab.id}}" data-group="{{tab.group}}">
  <div class="button-row app-controls">
    <button type="button" data-action="resetPosition" data-target="bigcal">
      <i class="fas fa-undo"></i>
      {{localize "CALENDARIA.Common.ResetPosition"}}
    </button>
    <button type="button" data-action="closeBigCal">
      <i class="fas fa-times"></i>
      {{localize "CALENDARIA.SettingsPanel.CloseBigCal"}}
    </button>
    <button type="button" data-action="showBigCal">
      <i class="fas fa-external-link-alt"></i>
      {{localize "CALENDARIA.Common.OpenBigCal"}}
    </button>
  </div>
  <p class="hint section-hint">{{openHint}}</p>
  <fieldset data-section="bigcal-display">
    <legend>
      {{localize "CALENDARIA.SettingsPanel.Section.Display"}}
      <button type="button" class="reset-section" data-action="resetSection" data-section="bigcal-display" 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="showBigCal">{{localize "CALENDARIA.Settings.ShowBigCal.Name"}}</label>
        <div class="form-fields">
          <input type="checkbox" id="showBigCal" name="showBigCal" {{#if showBigCal}}checked{{/if}}>
        </div>
        <p class="hint">{{localize "CALENDARIA.Settings.ShowBigCal.Hint"}}</p>
      </div>
      <div class="form-group">
        <label for="forceBigCal">{{localize "CALENDARIA.Common.ForceDisplayForAll"}}</label>
        <div class="form-fields">
          <input type="checkbox" id="forceBigCal" name="forceBigCal" {{#if forceBigCal}}checked{{/if}}>
        </div>
        <p class="hint">{{localize "CALENDARIA.Settings.ForceBigCal.Hint"}}</p>
      </div>
    {{/if}}
    <div class="form-group">
      <label for="bigCalAutoFade">{{localize "CALENDARIA.Settings.AutoFade.Name"}}</label>
      <div class="form-fields">
        <input type="checkbox" id="bigCalAutoFade" name="bigCalAutoFade" {{#if bigCalAutoFade}}checked{{/if}}>
      </div>
      <p class="hint">{{localize "CALENDARIA.Settings.AutoFade.Hint"}}</p>
    </div>
    <div class="form-group{{#unless bigCalAutoFade}} disabled{{/unless}}">
      <label for="bigCalIdleOpacity">{{localize "CALENDARIA.Settings.IdleOpacity.Name"}}</label>
      <div class="form-fields">
        <input type="range" id="bigCalIdleOpacity" name="bigCalIdleOpacity" min="10" max="100" step="5"
          value="{{bigCalIdleOpacity}}" {{#unless bigCalAutoFade}}disabled aria-disabled="true" {{/unless}}>
        <span class="range-value">{{bigCalIdleOpacity}}%</span>
      </div>
      <p class="hint">{{localize "CALENDARIA.Settings.IdleOpacity.Hint"}}</p>
    </div>

    <div class="form-group">
      <label for="bigCalCombatMode">{{localize "CALENDARIA.Common.CombatBehavior"}}</label>
      <div class="form-fields">
        <select id="bigCalCombatMode" name="bigCalCombatMode">
          <option value="none" {{#if (eq bigCalCombatMode "none")}}selected{{/if}}>
            {{localize "CALENDARIA.Common.None"}}
          </option>
          <option value="hideCombat" {{#if (eq bigCalCombatMode "hideCombat")}}selected{{/if}}>
            {{localize "CALENDARIA.Common.HideOnCombatStart"}}
          </option>
          <option value="hideEncounter" {{#if (eq bigCalCombatMode "hideEncounter")}}selected{{/if}}>
            {{localize "CALENDARIA.Common.HideOnEncounter"}}
          </option>
        </select>
      </div>
      <p class="hint">{{localize "CALENDARIA.Settings.WidgetCombatMode.Hint"}}</p>
    </div>
  </fieldset>
  <fieldset data-section="bigcal-block-visibility">
    <legend>
      {{localize "CALENDARIA.SettingsPanel.Section.BlockVisibility"}}
      <button type="button" class="reset-section" data-action="resetSection" data-section="bigcal-block-visibility"
        data-tooltip aria-label="{{localize "CALENDARIA.SettingsPanel.ResetSection.Tooltip"}}"><i
          class="fas fa-undo"></i></button>
    </legend>
    <p class="hint section-hint">{{localize "CALENDARIA.SettingsPanel.Hint.BlockVisibilityBigCal"}}</p>
    <div class="form-group">
      <label for="bigCalShowWeather">{{localize "CALENDARIA.Common.ShowWeather"}}</label>
      <div class="form-fields">
        <input type="checkbox" id="bigCalShowWeather" name="bigCalShowWeather" {{#if bigCalShowWeather}}checked{{/if}}>
      </div>
      <p class="hint">{{localize "CALENDARIA.Settings.BigCalShowWeather.Hint"}}</p>
    </div>
    <div class="form-group{{#unless bigCalShowWeather}} disabled{{/unless}}">
      <label for="bigCalWeatherDisplayMode">{{localize "CALENDARIA.Common.WeatherDisplay"}}</label>
      <div class="form-fields">
        <select id="bigCalWeatherDisplayMode" name="bigCalWeatherDisplayMode" {{#unless bigCalShowWeather}}disabled
          aria-disabled="true" {{/unless}}>
          {{#each bigCalWeatherDisplayModeOptions}}
            <option value="{{this.value}}" {{#if this.selected}}selected{{/if}}>{{this.label}}</option>
          {{/each}}
        </select>
      </div>
      <p class="hint">{{localize "CALENDARIA.Settings.BigCalWeatherDisplayMode.Hint"}}</p>
    </div>
    <div class="form-group">
      <label for="bigCalShowSeason">{{localize "CALENDARIA.Common.ShowSeason"}}</label>
      <div class="form-fields">
        <input type="checkbox" id="bigCalShowSeason" name="bigCalShowSeason" {{#if bigCalShowSeason}}checked{{/if}}>
      </div>
      <p class="hint">{{localize "CALENDARIA.Settings.BigCalShowSeason.Hint"}}</p>
    </div>
    <div class="form-group{{#unless bigCalShowSeason}} disabled{{/unless}}">
      <label for="bigCalSeasonDisplayMode">{{localize "CALENDARIA.Common.SeasonDisplay"}}</label>
      <div class="form-fields">
        <select id="bigCalSeasonDisplayMode" name="bigCalSeasonDisplayMode" {{#unless bigCalShowSeason}}disabled
          aria-disabled="true" {{/unless}}>
          {{#each bigCalSeasonDisplayModeOptions}}
            <option value="{{this.value}}" {{#if this.selected}}selected{{/if}}>{{this.label}}</option>
          {{/each}}
        </select>
      </div>
      <p class="hint">{{localize "CALENDARIA.Settings.BigCalSeasonDisplayMode.Hint"}}</p>
    </div>
    <div class="form-group">
      <label for="bigCalShowEra">{{localize "CALENDARIA.Common.ShowEra"}}</label>
      <div class="form-fields">
        <input type="checkbox" id="bigCalShowEra" name="bigCalShowEra" {{#if bigCalShowEra}}checked{{/if}}>
      </div>
      <p class="hint">{{localize "CALENDARIA.Settings.BigCalShowEra.Hint"}}</p>
    </div>
    <div class="form-group{{#unless bigCalShowEra}} disabled{{/unless}}">
      <label for="bigCalEraDisplayMode">{{localize "CALENDARIA.Common.EraDisplay"}}</label>
      <div class="form-fields">
        <select id="bigCalEraDisplayMode" name="bigCalEraDisplayMode" {{#unless bigCalShowEra}}disabled
          aria-disabled="true" {{/unless}}>
          {{#each bigCalEraDisplayModeOptions}}
            <option value="{{this.value}}" {{#if this.selected}}selected{{/if}}>{{this.label}}</option>
          {{/each}}
        </select>
      </div>
      <p class="hint">{{localize "CALENDARIA.Settings.BigCalEraDisplayMode.Hint"}}</p>
    </div>
    <div class="form-group">
      <label for="bigCalShowCycles">{{localize "CALENDARIA.Common.ShowCycles"}}</label>
      <div class="form-fields">
        <input type="checkbox" id="bigCalShowCycles" name="bigCalShowCycles" {{#if bigCalShowCycles}}checked{{/if}}>
      </div>
      <p class="hint">{{localize "CALENDARIA.Settings.BigCalShowCycles.Hint"}}</p>
    </div>
    <div class="form-group{{#unless bigCalShowCycles}} disabled{{/unless}}">
      <label for="bigCalCyclesDisplayMode">{{localize "CALENDARIA.Common.CyclesDisplay"}}</label>
      <div class="form-fields">
        <select id="bigCalCyclesDisplayMode" name="bigCalCyclesDisplayMode" {{#unless bigCalShowCycles}}disabled
          aria-disabled="true" {{/unless}}>
          {{#each bigCalCyclesDisplayModeOptions}}
            <option value="{{this.value}}" {{#if this.selected}}selected{{/if}}>{{this.label}}</option>
          {{/each}}
        </select>
      </div>
      <p class="hint">{{localize "CALENDARIA.Settings.BigCalCyclesDisplayMode.Hint"}}</p>
    </div>
    <div class="form-group">
      <label for="bigCalHeaderShowSelected">{{localize "CALENDARIA.Common.ShowSelectedDateInHeader"}}</label>
      <div class="form-fields">
        <input type="checkbox" id="bigCalHeaderShowSelected" name="bigCalHeaderShowSelected"
          {{#if bigCalHeaderShowSelected}}checked{{/if}}>
      </div>
      <p class="hint">{{localize "CALENDARIA.Common.ShowSelectedDateInHeaderHint"}}</p>
    </div>
  </fieldset>
  {{#if isGM}}
    <fieldset data-section="display-formats">
      <legend>
        {{localize "CALENDARIA.SettingsPanel.Section.DisplayFormats"}}
        <button type="button" class="legend-help" data-action="showTokenReference" data-context-type="date" data-tooltip
          aria-label="{{localize "CALENDARIA.SettingsPanel.FormatHelp.Tooltip"}}"><i
            class="fa-solid fa-question"></i></button>
      </legend>
      <p class="hint section-hint">{{localize "CALENDARIA.SettingsPanel.Hint.FormatSettings"}}</p>
      {{#each formatLocations}}
        <div class="format-location" data-location="{{id}}">
          <div class="form-group">
            <label>{{label}}</label>
          </div>
          <div class="format-row">
            <div class="format-column">
              <span class="format-label">{{localize "CALENDARIA.Format.GMFormat"}} <span class="format-preview"
                  data-location="{{id}}" data-role="gm"></span></span>
              <select name="displayFormats.{{id}}.gmPreset" data-location="{{id}}" data-role="gm">
                {{#each gmPresetOptions}}
                  <option value="{{value}}" {{#if selected}}selected{{/if}}>{{label}}</option>
                {{/each}}
              </select>
              <input type="text" name="displayFormats.{{id}}.gmCustom" value="{{#if isCustomGM}}{{gmFormat}}{{/if}}"
                placeholder="EEEE, D MMMM YYYY" class="format-custom-input {{#unless isCustomGM}}hidden{{/unless}}"
                data-location="{{id}}" data-role="gm">
            </div>
            <div class="format-column">
              <span class="format-label">{{localize "CALENDARIA.Format.PlayerFormat"}} <span class="format-preview"
                  data-location="{{id}}" data-role="player"></span></span>
              <select name="displayFormats.{{id}}.playerPreset" data-location="{{id}}" data-role="player">
                {{#each playerPresetOptions}}
                  <option value="{{value}}" {{#if selected}}selected{{/if}}>{{label}}</option>
                {{/each}}
              </select>
              <input type="text" name="displayFormats.{{id}}.playerCustom"
                value="{{#if isCustomPlayer}}{{playerFormat}}{{/if}}" placeholder="EEEE, D MMMM YYYY"
                class="format-custom-input {{#unless isCustomPlayer}}hidden{{/unless}}" data-location="{{id}}"
                data-role="player">
            </div>
          </div>
        </div>
      {{/each}}
    </fieldset>
  {{/if}}
</section>
