<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="hud">
      <i class="fas fa-undo"></i>
      {{localize "CALENDARIA.Common.ResetPosition"}}
    </button>
    <button type="button" data-action="closeHUD">
      <i class="fas fa-times"></i>
      {{localize "CALENDARIA.SettingsPanel.CloseHUD"}}
    </button>
    <button type="button" data-action="openHUD">
      <i class="fas fa-external-link-alt"></i>
      {{localize "CALENDARIA.SettingsPanel.OpenHUD"}}
    </button>
  </div>
  <p class="hint section-hint">{{openHint}}</p>
  <fieldset data-section="hud-display">
    <legend>
      {{localize "CALENDARIA.SettingsPanel.Section.Display"}}
      <button type="button" class="reset-section" data-action="resetSection" data-section="hud-display" data-tooltip
        aria-label="{{localize "CALENDARIA.SettingsPanel.ResetSection.Tooltip"}}"><i class="fas fa-undo"></i></button>
    </legend>
    <div class="form-group">
      <label for="showCalendarHUD">{{localize "CALENDARIA.Settings.ShowCalendarHUD.Name"}}</label>
      <div class="form-fields">
        <input type="checkbox" id="showCalendarHUD" name="showCalendarHUD" {{#if showCalendarHUD}}checked{{/if}}>
      </div>
      <p class="hint">{{localize "CALENDARIA.Settings.ShowCalendarHUD.Hint"}}</p>
    </div>
    {{#if isGM}}
      <div class="form-group">
        <label for="forceHUD">{{localize "CALENDARIA.Common.ForceDisplayForAll"}}</label>
        <div class="form-fields">
          <input type="checkbox" id="forceHUD" name="forceHUD" {{#if forceHUD}}checked{{/if}}>
        </div>
        <p class="hint">{{localize "CALENDARIA.Settings.ForceHUD.Hint"}}</p>
      </div>
      <div class="form-group">
        <label for="forceHUDLock">{{localize "CALENDARIA.Settings.ForceHUDLock.Name"}}</label>
        <div class="form-fields">
          <input type="checkbox" id="forceHUDLock" name="forceHUDLock" {{#if forceHUDLock}}checked{{/if}}>
        </div>
        <p class="hint">{{localize "CALENDARIA.Settings.ForceHUDLock.Hint"}}</p>
      </div>
      <div class="form-group">
        <label for="forceHUDZone">{{localize "CALENDARIA.Settings.ForceHUDZone.Name"}}</label>
        <div class="form-fields">
          <select id="forceHUDZone" name="forceHUDZone">
            {{#each forceHUDZoneOptions}}
              <option value="{{this.value}}" {{#if this.selected}}selected{{/if}}>{{localize this.label}}</option>
            {{/each}}
          </select>
        </div>
        <p class="hint">{{localize "CALENDARIA.Settings.ForceHUDZone.Hint"}}</p>
      </div>
    {{/if}}
    <div class="form-group">
      <label for="calendarHUDMode">{{localize "CALENDARIA.Settings.CalendarHUDMode.Name"}}</label>
      <div class="form-fields">
        <select id="calendarHUDMode" name="calendarHUDMode">
          {{#each hudModeOptions}}
            <option value="{{this.value}}" {{#if this.selected}}selected{{/if}}>{{this.label}}</option>
          {{/each}}
        </select>
      </div>
      <p class="hint">{{localize "CALENDARIA.Settings.CalendarHUDMode.Hint"}}</p>
    </div>
    <div class="form-group">
      <label for="hudCalendarButton">{{localize "CALENDARIA.Settings.HUDCalendarButton.Name"}}</label>
      <div class="form-fields">
        <select id="hudCalendarButton" name="hudCalendarButton">
          {{#each hudCalendarButtonOptions}}
            <option value="{{this.value}}" {{#if this.selected}}selected{{/if}}>{{this.label}}</option>
          {{/each}}
        </select>
      </div>
      <p class="hint">{{localize "CALENDARIA.Settings.HUDCalendarButton.Hint"}}</p>
    </div>
    <div class="form-group{{#if isCompactMode}} disabled{{/if}}">
      <label for="hudDialStyle">{{localize "CALENDARIA.Settings.HUDDialStyle.Name"}}</label>
      <div class="form-fields">
        <select id="hudDialStyle" name="hudDialStyle" {{#if isCompactMode}}disabled aria-disabled="true" data-tooltip
          aria-label="{{localize "CALENDARIA.Common.NotAvailableInCompact"}}" {{/if}}>
          {{#each dialStyleOptions}}
            <option value="{{this.value}}" {{#if this.selected}}selected{{/if}}>{{this.label}}</option>
          {{/each}}
        </select>
      </div>
      <p class="hint">
        {{#if isCompactMode}}{{localize "CALENDARIA.Settings.HUDDialStyle.DisabledHint"}}{{else}}{{localize "CALENDARIA.Settings.HUDDialStyle.Hint"}}{{/if}}
      </p>
    </div>
    <div class="form-group">
      <label for="hudWeatherFxMode">{{localize "CALENDARIA.Settings.HUDWeatherFxMode.Name"}}</label>
      <div class="form-fields">
        <select id="hudWeatherFxMode" name="hudWeatherFxMode">
          {{#each weatherFxModeOptions}}
            <option value="{{value}}" {{#if selected}}selected{{/if}}>{{label}}</option>
          {{/each}}
        </select>
      </div>
      <p class="hint">{{localize "CALENDARIA.Settings.HUDWeatherFxMode.Hint"}}</p>
    </div>
    {{#if isGM}}
      <div class="form-group">
        <label for="hudBorderGlow">{{localize "CALENDARIA.Settings.HUDBorderGlow.Name"}}</label>
        <div class="form-fields">
          <input type="checkbox" id="hudBorderGlow" name="hudBorderGlow" {{#if hudBorderGlow}}checked{{/if}}>
        </div>
        <p class="hint">{{localize "CALENDARIA.Settings.HUDBorderGlow.Hint"}}</p>
      </div>
    {{/if}}
    <div class="form-group">
      <label for="hudDomeBelow">{{localize "CALENDARIA.Settings.HUDDomeBelow.Name"}}</label>
      <div class="form-fields">
        <input type="checkbox" id="hudDomeBelow" name="hudDomeBelow" {{#if hudDomeBelow}}checked{{/if}}>
      </div>
      <p class="hint">{{localize "CALENDARIA.Settings.HUDDomeBelow.Hint"}}</p>
    </div>
    <div class="form-group">
      <label for="hudTrayDirection">{{localize "CALENDARIA.Settings.HUDTrayDirection.Name"}}</label>
      <div class="form-fields">
        <select id="hudTrayDirection" name="hudTrayDirection">
          {{#each trayDirectionOptions}}
            <option value="{{this.value}}" {{#if this.selected}}selected{{/if}}>{{this.label}}</option>
          {{/each}}
        </select>
      </div>
      <p class="hint">{{localize "CALENDARIA.Settings.HUDTrayDirection.Hint"}}</p>
    </div>
    <div class="form-group">
      <label for="hudCombatMode">{{localize "CALENDARIA.Common.CombatBehavior"}}</label>
      <div class="form-fields">
        <select id="hudCombatMode" name="hudCombatMode">
          <option value="none" {{#if (eq hudCombatMode "none")}}selected{{/if}}>
            {{localize "CALENDARIA.Common.None"}}
          </option>
          <option value="compactCombat" {{#if (eq hudCombatMode "compactCombat")}}selected{{/if}}>
            {{localize "CALENDARIA.Settings.HUDCombatMode.CompactCombat"}}
          </option>
          <option value="compactEncounter" {{#if (eq hudCombatMode "compactEncounter")}}selected{{/if}}>
            {{localize "CALENDARIA.Settings.HUDCombatMode.CompactEncounter"}}
          </option>
          <option value="hideCombat" {{#if (eq hudCombatMode "hideCombat")}}selected{{/if}}>
            {{localize "CALENDARIA.Common.HideOnCombatStart"}}
          </option>
          <option value="hideEncounter" {{#if (eq hudCombatMode "hideEncounter")}}selected{{/if}}>
            {{localize "CALENDARIA.Common.HideOnEncounter"}}
          </option>
        </select>
      </div>
      <p class="hint">{{localize "CALENDARIA.Settings.HUDCombatMode.Hint"}}</p>
    </div>
    <div class="form-group">
      <label for="hudDomeAutoHide">{{localize "CALENDARIA.Settings.DomeAutoHide.Name"}}</label>
      <div class="form-fields">
        <input type="checkbox" id="hudDomeAutoHide" name="hudDomeAutoHide" {{#if hudDomeAutoHide}}checked{{/if}}>
      </div>
      <p class="hint">{{localize "CALENDARIA.Settings.DomeAutoHide.Hint"}}</p>
    </div>
    <div class="form-group">
      <label for="hudShowAllMoons">{{localize "CALENDARIA.Settings.HUDShowAllMoons.Name"}}</label>
      <div class="form-fields">
        <input type="checkbox" id="hudShowAllMoons" name="hudShowAllMoons" {{#if hudShowAllMoons}}checked{{/if}}>
      </div>
      <p class="hint">{{localize "CALENDARIA.Settings.HUDShowAllMoons.Hint"}}</p>
    </div>
    <div class="form-group{{#if isCompactMode}} disabled{{/if}}">
      <label for="hudWidthScale">{{localize "CALENDARIA.Settings.HUDWidthScale.Name"}}</label>
      <div class="form-fields range-field">
        <div class="slider-with-ticks">
          <input type="range" id="hudWidthScale" name="hudWidthScale" min="0.5" max="2" step="0.05"
            value="{{hudWidthScale}}" list="scale-ticks" {{#if isCompactMode}}disabled aria-disabled="true" data-tooltip
            aria-label="{{localize "CALENDARIA.Common.NotAvailableInCompact"}}" {{/if}}>
          <datalist id="scale-ticks">
            <option value="0.5"></option>
            <option value="1"></option>
            <option value="1.5"></option>
            <option value="2"></option>
          </datalist>
          <div class="slider-ticks">
            <span></span><span></span><span></span><span></span>
          </div>
        </div>
        <span class="range-value">{{hudWidthScale}}x</span>
      </div>
      <p class="hint">
        {{#if isCompactMode}}{{localize "CALENDARIA.Settings.HUDWidthScale.DisabledHint"}}{{else}}{{localize "CALENDARIA.Settings.HUDWidthScale.Hint"}}{{/if}}
      </p>
    </div>
    <div class="form-group">
      <label for="hudAutoFade">{{localize "CALENDARIA.Settings.AutoFade.Name"}}</label>
      <div class="form-fields">
        <input type="checkbox" id="hudAutoFade" name="hudAutoFade" {{#if hudAutoFade}}checked{{/if}}>
      </div>
      <p class="hint">{{localize "CALENDARIA.Settings.AutoFade.Hint"}}</p>
    </div>
    <div class="form-group{{#unless hudAutoFade}} disabled{{/unless}}">
      <label for="hudIdleOpacity">{{localize "CALENDARIA.Settings.IdleOpacity.Name"}}</label>
      <div class="form-fields">
        <div class="slider-with-ticks">
          <input type="range" id="hudIdleOpacity" name="hudIdleOpacity" min="0" max="100" value="{{hudIdleOpacity}}"
            list="opacity-ticks" {{#unless hudAutoFade}}disabled aria-disabled="true" data-tooltip
            aria-label="{{localize "CALENDARIA.Settings.IdleOpacity.DisabledTitle"}}" {{/unless}}>
          <datalist id="opacity-ticks">
            <option value="0"></option>
            <option value="25"></option>
            <option value="50"></option>
            <option value="75"></option>
            <option value="100"></option>
          </datalist>
          <div class="slider-ticks">
            <span></span><span></span><span></span><span></span><span></span>
          </div>
        </div>
        <input type="number" class="range-value" min="0" max="100" value="{{hudIdleOpacity}}"
          style="width: 3rem; flex: none" {{#unless hudAutoFade}}disabled aria-disabled="true" data-tooltip
          aria-label="{{localize "CALENDARIA.Settings.IdleOpacity.DisabledTitle"}}" {{/unless}}>
        <span class="input-suffix">%</span>
      </div>
      <p class="hint">{{localize "CALENDARIA.Settings.IdleOpacity.Hint"}}</p>
    </div>
  </fieldset>
  <fieldset data-section="hud-block-visibility">
    <legend>
      {{localize "CALENDARIA.SettingsPanel.Section.BlockVisibility"}}
      <button type="button" class="reset-section" data-action="resetSection" data-section="hud-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.BlockVisibility"}}</p>
    <div class="form-group">
      <label for="hudShowWeather">{{localize "CALENDARIA.Common.ShowWeather"}}</label>
      <div class="form-fields">
        <input type="checkbox" id="hudShowWeather" name="hudShowWeather" {{#if hudShowWeather}}checked{{/if}}>
      </div>
      <p class="hint">{{localize "CALENDARIA.Settings.HUDShowWeather.Hint"}}</p>
    </div>
    {{#unless isCompactMode}}
      <div class="form-group{{#unless hudShowWeather}} disabled{{/unless}}">
        <label for="hudWeatherDisplayMode">{{localize "CALENDARIA.Common.WeatherDisplay"}}</label>
        <div class="form-fields">
          <select id="hudWeatherDisplayMode" name="hudWeatherDisplayMode" {{#unless hudShowWeather}}disabled
            aria-disabled="true" {{/unless}}>
            {{#each weatherDisplayModeOptions}}
              <option value="{{this.value}}" {{#if this.selected}}selected{{/if}}>{{this.label}}</option>
            {{/each}}
          </select>
        </div>
        <p class="hint">{{localize "CALENDARIA.Settings.HUDWeatherDisplayMode.Hint"}}</p>
      </div>
    {{/unless}}
    <div class="form-group">
      <label for="hudShowSeason">{{localize "CALENDARIA.Common.ShowSeason"}}</label>
      <div class="form-fields">
        <input type="checkbox" id="hudShowSeason" name="hudShowSeason" {{#if hudShowSeason}}checked{{/if}}>
      </div>
      <p class="hint">{{localize "CALENDARIA.Settings.HUDShowSeason.Hint"}}</p>
    </div>
    {{#unless isCompactMode}}
      <div class="form-group{{#unless hudShowSeason}} disabled{{/unless}}">
        <label for="hudSeasonDisplayMode">{{localize "CALENDARIA.Common.SeasonDisplay"}}</label>
        <div class="form-fields">
          <select id="hudSeasonDisplayMode" name="hudSeasonDisplayMode" {{#unless hudShowSeason}}disabled
            aria-disabled="true" {{/unless}}>
            {{#each seasonDisplayModeOptions}}
              <option value="{{this.value}}" {{#if this.selected}}selected{{/if}}>{{this.label}}</option>
            {{/each}}
          </select>
        </div>
        <p class="hint">{{localize "CALENDARIA.Settings.HUDSeasonDisplayMode.Hint"}}</p>
      </div>
    {{/unless}}
    <div class="form-group">
      <label for="hudShowEra">{{localize "CALENDARIA.Common.ShowEra"}}</label>
      <div class="form-fields">
        <input type="checkbox" id="hudShowEra" name="hudShowEra" {{#if hudShowEra}}checked{{/if}}>
      </div>
      <p class="hint">{{localize "CALENDARIA.Settings.HUDShowEra.Hint"}}</p>
    </div>
    {{#unless isCompactMode}}
      <div class="form-group{{#unless hudShowEra}} disabled{{/unless}}">
        <label for="hudEraDisplayMode">{{localize "CALENDARIA.Common.EraDisplay"}}</label>
        <div class="form-fields">
          <select id="hudEraDisplayMode" name="hudEraDisplayMode" {{#unless hudShowEra}}disabled aria-disabled="true"
            {{/unless}}>
            {{#each eraDisplayModeOptions}}
              <option value="{{this.value}}" {{#if this.selected}}selected{{/if}}>{{this.label}}</option>
            {{/each}}
          </select>
        </div>
        <p class="hint">{{localize "CALENDARIA.Settings.HUDEraDisplayMode.Hint"}}</p>
      </div>
    {{/unless}}
    <div class="form-group">
      <label for="hudShowCycles">{{localize "CALENDARIA.Common.ShowCycles"}}</label>
      <div class="form-fields">
        <input type="checkbox" id="hudShowCycles" name="hudShowCycles" {{#if hudShowCycles}}checked{{/if}}>
      </div>
      <p class="hint">{{localize "CALENDARIA.Settings.HUDShowCycles.Hint"}}</p>
    </div>
    {{#unless isCompactMode}}
      <div class="form-group{{#unless hudShowCycles}} disabled{{/unless}}">
        <label for="hudCyclesDisplayMode">{{localize "CALENDARIA.Common.CyclesDisplay"}}</label>
        <div class="form-fields">
          <select id="hudCyclesDisplayMode" name="hudCyclesDisplayMode" {{#unless hudShowCycles}}disabled
            aria-disabled="true" {{/unless}}>
            {{#each cyclesDisplayModeOptions}}
              <option value="{{this.value}}" {{#if this.selected}}selected{{/if}}>{{this.label}}</option>
            {{/each}}
          </select>
        </div>
        <p class="hint">{{localize "CALENDARIA.Settings.HUDCyclesDisplayMode.Hint"}}</p>
      </div>
    {{/unless}}
  </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="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="D MMMM YYYY"
                class="format-custom-input {{#unless isCustomPlayer}}hidden{{/unless}}" data-location="{{id}}"
                data-role="player">
            </div>
          </div>
        </div>
      {{/each}}
    </fieldset>
    <fieldset data-section="hud-time-jumps">
      <legend>
        {{localize "CALENDARIA.SettingsPanel.Section.CustomTimeJumps"}}
        <button type="button" class="reset-section" data-action="resetSection" data-section="hud-time-jumps"
          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.CustomTimeJumps"}}</p>
      <div class="time-jumps-grid">
        <div class="time-jumps-header">
          <span></span>
          <span>{{localize "CALENDARIA.SettingsPanel.TimeJumps.MajorDecrement"}}</span>
          <span>{{localize "CALENDARIA.SettingsPanel.TimeJumps.MinorDecrement"}}</span>
          <span>{{localize "CALENDARIA.SettingsPanel.TimeJumps.MinorIncrement"}}</span>
          <span>{{localize "CALENDARIA.SettingsPanel.TimeJumps.MajorIncrement"}}</span>
        </div>
        {{#each customTimeJumps}}
          <div class="time-jumps-row">
            <label>{{label}}</label>
            <input type="number" name="customTimeJumps.{{key}}.dec2" value="{{jumps.dec2}}"
              aria-label="{{label}} {{localize "CALENDARIA.SettingsPanel.TimeJumps.MajorDecrement"}}">
            <input type="number" name="customTimeJumps.{{key}}.dec1" value="{{jumps.dec1}}"
              aria-label="{{label}} {{localize "CALENDARIA.SettingsPanel.TimeJumps.MinorDecrement"}}">
            <input type="number" name="customTimeJumps.{{key}}.inc1" value="{{jumps.inc1}}"
              aria-label="{{label}} {{localize "CALENDARIA.SettingsPanel.TimeJumps.MinorIncrement"}}">
            <input type="number" name="customTimeJumps.{{key}}.inc2" value="{{jumps.inc2}}"
              aria-label="{{label}} {{localize "CALENDARIA.SettingsPanel.TimeJumps.MajorIncrement"}}">
          </div>
        {{/each}}
      </div>
    </fieldset>
  {{/if}}
  <fieldset data-section="hud-sticky">
    <legend>
      {{localize "CALENDARIA.SettingsPanel.Section.StickyStates"}}
      <button type="button" class="reset-section" data-action="resetSection" data-section="hud-sticky" data-tooltip
        aria-label="{{localize "CALENDARIA.SettingsPanel.ResetSection.Tooltip"}}"><i class="fas fa-undo"></i></button>
    </legend>
    <input type="hidden" name="hudStickySection" value="1">
    <p class="hint section-hint">{{localize "CALENDARIA.SettingsPanel.Hint.StickyStates"}}</p>
    <div class="form-group">
      <label for="hudStickyTray">{{localize "CALENDARIA.SettingsPanel.Sticky.Tray"}}</label>
      <div class="form-fields">
        <input type="checkbox" id="hudStickyTray" name="hudStickyTray" {{#if hudStickyTray}}checked{{/if}}>
      </div>
      <p class="hint">{{localize "CALENDARIA.SettingsPanel.Hint.StickyTray"}}</p>
    </div>
    <div class="form-group">
      <label for="calendarHUDLocked">{{localize "CALENDARIA.Common.LockPosition"}}</label>
      <div class="form-fields">
        <input type="checkbox" id="calendarHUDLocked" name="calendarHUDLocked" {{#if calendarHUDLocked}}checked{{/if}}>
      </div>
      <p class="hint">{{localize "CALENDARIA.SettingsPanel.Hint.LockHUDPosition"}}</p>
    </div>
  </fieldset>
</section>
