<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="miniCal">
      <i class="fas fa-undo"></i>
      {{localize "CALENDARIA.Common.ResetPosition"}}
    </button>
    <button type="button" data-action="closeMiniCal">
      <i class="fas fa-times"></i>
      {{localize "CALENDARIA.SettingsPanel.CloseMiniCal"}}
    </button>
    <button type="button" data-action="openMiniCal">
      <i class="fas fa-external-link-alt"></i>
      {{localize "CALENDARIA.Common.OpenMiniCal"}}
    </button>
  </div>
  <p class="hint section-hint">{{openHint}}</p>

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

    <div class="form-group">
      <label for="showMiniCal">{{localize "CALENDARIA.Settings.ShowMiniCal.Name"}}</label>
      <div class="form-fields">
        <input type="checkbox" id="showMiniCal" name="showMiniCal" {{#if showMiniCal}}checked{{/if}}>
      </div>
      <p class="hint">{{localize "CALENDARIA.Settings.ShowMiniCal.Hint"}}</p>
    </div>

    {{#if isGM}}
      <div class="form-group">
        <label for="forceMiniCal">{{localize "CALENDARIA.Common.ForceDisplayForAll"}}</label>
        <div class="form-fields">
          <input type="checkbox" id="forceMiniCal" name="forceMiniCal" {{#if forceMiniCal}}checked{{/if}}>
        </div>
        <p class="hint">{{localize "CALENDARIA.Settings.ForceMiniCal.Hint"}}</p>
      </div>
    {{/if}}

    <div class="form-group">
      <label for="miniCalCompactMode">{{localize "CALENDARIA.Settings.MiniCalCompactMode.Name"}}</label>
      <div class="form-fields">
        <input type="checkbox" id="miniCalCompactMode" name="miniCalCompactMode"
          {{#if miniCalCompactMode}}checked{{/if}}>
      </div>
      <p class="hint">{{localize "CALENDARIA.Settings.MiniCalCompactMode.Hint"}}</p>
    </div>

    <div class="form-group">
      <label for="miniCalControlsDelay">{{localize "CALENDARIA.Settings.MiniCalControlsDelay.Name"}}</label>
      <div class="form-fields">
        <div class="slider-with-ticks">
          <input type="range" id="miniCalControlsDelay" name="miniCalControlsDelay" value="{{miniCalControlsDelay}}"
            min="1" max="10" step="1" list="delay-ticks">
          <datalist id="delay-ticks">
            <option value="1"></option>
            <option value="2"></option>
            <option value="3"></option>
            <option value="4"></option>
            <option value="5"></option>
            <option value="6"></option>
            <option value="7"></option>
            <option value="8"></option>
            <option value="9"></option>
            <option value="10"></option>
          </datalist>
          <div class="slider-ticks">
            <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
          </div>
        </div>
        <span class="range-value">{{miniCalControlsDelay}}s</span>
      </div>
      <p class="hint">{{localize "CALENDARIA.Settings.MiniCalControlsDelay.Hint"}}</p>
    </div>

    <div class="form-group">
      <label for="miniCalAutoFade">{{localize "CALENDARIA.Settings.AutoFade.Name"}}</label>
      <div class="form-fields">
        <input type="checkbox" id="miniCalAutoFade" name="miniCalAutoFade" {{#if miniCalAutoFade}}checked{{/if}}>
      </div>
      <p class="hint">{{localize "CALENDARIA.Settings.AutoFade.Hint"}}</p>
    </div>

    <div class="form-group{{#unless miniCalAutoFade}} disabled{{/unless}}">
      <label for="miniCalIdleOpacity">{{localize "CALENDARIA.Settings.IdleOpacity.Name"}}</label>
      <div class="form-fields">
        <div class="slider-with-ticks">
          <input type="range" id="miniCalIdleOpacity" name="miniCalIdleOpacity" min="0" max="100"
            value="{{miniCalIdleOpacity}}" list="opacity-ticks" {{#unless miniCalAutoFade}}disabled aria-disabled="true"
            data-tooltip aria-label="{{localize "CALENDARIA.Settings.IdleOpacity.DisabledTitle"}}" {{/unless}}>
          <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="{{miniCalIdleOpacity}}"
          style="width: 3rem; flex: none" {{#unless miniCalAutoFade}}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>

    {{#if isGM}}
      <div class="form-group">
        <label for="miniCalConfirmSetDate">{{localize "CALENDARIA.Settings.ConfirmSetDate.Name"}}</label>
        <div class="form-fields">
          <input type="checkbox" id="miniCalConfirmSetDate" name="miniCalConfirmSetDate"
            {{#if miniCalConfirmSetDate}}checked{{/if}}>
        </div>
        <p class="hint">{{localize "CALENDARIA.Settings.ConfirmSetDate.Hint"}}</p>
      </div>
    {{/if}}

    <div class="form-group">
      <label for="miniCalAutoOpenNotes">{{localize "CALENDARIA.Settings.AutoOpenNotes.Name"}}</label>
      <div class="form-fields">
        <input type="checkbox" id="miniCalAutoOpenNotes" name="miniCalAutoOpenNotes"
          {{#if miniCalAutoOpenNotes}}checked{{/if}}>
      </div>
      <p class="hint">{{localize "CALENDARIA.Settings.AutoOpenNotes.Hint"}}</p>
    </div>

    <div class="form-group">
      <label for="miniCalCombatMode">{{localize "CALENDARIA.Common.CombatBehavior"}}</label>
      <div class="form-fields">
        <select id="miniCalCombatMode" name="miniCalCombatMode">
          <option value="none" {{#if (eq miniCalCombatMode "none")}}selected{{/if}}>
            {{localize "CALENDARIA.Common.None"}}
          </option>
          <option value="hideCombat" {{#if (eq miniCalCombatMode "hideCombat")}}selected{{/if}}>
            {{localize "CALENDARIA.Common.HideOnCombatStart"}}
          </option>
          <option value="hideEncounter" {{#if (eq miniCalCombatMode "hideEncounter")}}selected{{/if}}>
            {{localize "CALENDARIA.Common.HideOnEncounter"}}
          </option>
        </select>
      </div>
      <p class="hint">{{localize "CALENDARIA.Settings.WidgetCombatMode.Hint"}}</p>
    </div>
  </fieldset>

  <fieldset data-section="minical-block-visibility">
    <legend>
      {{localize "CALENDARIA.SettingsPanel.Section.BlockVisibility"}}
      <button type="button" class="reset-section" data-action="resetSection" data-section="minical-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.BlockVisibilityMiniCal"}}</p>

    <div class="form-group">
      <label for="miniCalShowTime">{{localize "CALENDARIA.Settings.MiniCalShowTime.Name"}}</label>
      <div class="form-fields">
        <input type="checkbox" id="miniCalShowTime" name="miniCalShowTime" {{#if miniCalShowTime}}checked{{/if}}>
      </div>
      <p class="hint">{{localize "CALENDARIA.Settings.MiniCalShowTime.Hint"}}</p>
    </div>

    <div class="form-group">
      <label for="miniCalShowWeather">{{localize "CALENDARIA.Common.ShowWeather"}}</label>
      <div class="form-fields">
        <input type="checkbox" id="miniCalShowWeather" name="miniCalShowWeather"
          {{#if miniCalShowWeather}}checked{{/if}}>
      </div>
      <p class="hint">{{localize "CALENDARIA.Settings.MiniCalShowWeather.Hint"}}</p>
    </div>

    <div class="form-group{{#unless miniCalShowWeather}} disabled{{/unless}}">
      <label for="miniCalWeatherDisplayMode">{{localize "CALENDARIA.Common.WeatherDisplay"}}</label>
      <div class="form-fields">
        <select id="miniCalWeatherDisplayMode" name="miniCalWeatherDisplayMode" {{#unless miniCalShowWeather}}disabled
          aria-disabled="true" {{/unless}}>
          {{#each miniCalWeatherDisplayModeOptions}}
            <option value="{{this.value}}" {{#if this.selected}}selected{{/if}}>{{this.label}}</option>
          {{/each}}
        </select>
      </div>
      <p class="hint">{{localize "CALENDARIA.Settings.MiniCalWeatherDisplayMode.Hint"}}</p>
    </div>

    <div class="form-group">
      <label for="miniCalShowSeason">{{localize "CALENDARIA.Common.ShowSeason"}}</label>
      <div class="form-fields">
        <input type="checkbox" id="miniCalShowSeason" name="miniCalShowSeason" {{#if miniCalShowSeason}}checked{{/if}}>
      </div>
      <p class="hint">{{localize "CALENDARIA.Settings.MiniCalShowSeason.Hint"}}</p>
    </div>

    <div class="form-group{{#unless miniCalShowSeason}} disabled{{/unless}}">
      <label for="miniCalSeasonDisplayMode">{{localize "CALENDARIA.Common.SeasonDisplay"}}</label>
      <div class="form-fields">
        <select id="miniCalSeasonDisplayMode" name="miniCalSeasonDisplayMode" {{#unless miniCalShowSeason}}disabled
          aria-disabled="true" {{/unless}}>
          {{#each miniCalSeasonDisplayModeOptions}}
            <option value="{{this.value}}" {{#if this.selected}}selected{{/if}}>{{this.label}}</option>
          {{/each}}
        </select>
      </div>
      <p class="hint">{{localize "CALENDARIA.Settings.MiniCalSeasonDisplayMode.Hint"}}</p>
    </div>

    <div class="form-group">
      <label for="miniCalShowEra">{{localize "CALENDARIA.Common.ShowEra"}}</label>
      <div class="form-fields">
        <input type="checkbox" id="miniCalShowEra" name="miniCalShowEra" {{#if miniCalShowEra}}checked{{/if}}>
      </div>
      <p class="hint">{{localize "CALENDARIA.Settings.MiniCalShowEra.Hint"}}</p>
    </div>

    <div class="form-group{{#unless miniCalShowEra}} disabled{{/unless}}">
      <label for="miniCalEraDisplayMode">{{localize "CALENDARIA.Common.EraDisplay"}}</label>
      <div class="form-fields">
        <select id="miniCalEraDisplayMode" name="miniCalEraDisplayMode" {{#unless miniCalShowEra}}disabled
          aria-disabled="true" {{/unless}}>
          {{#each miniCalEraDisplayModeOptions}}
            <option value="{{this.value}}" {{#if this.selected}}selected{{/if}}>{{this.label}}</option>
          {{/each}}
        </select>
      </div>
      <p class="hint">{{localize "CALENDARIA.Settings.MiniCalEraDisplayMode.Hint"}}</p>
    </div>

    <div class="form-group">
      <label for="miniCalShowCycles">{{localize "CALENDARIA.Common.ShowCycles"}}</label>
      <div class="form-fields">
        <input type="checkbox" id="miniCalShowCycles" name="miniCalShowCycles" {{#if miniCalShowCycles}}checked{{/if}}>
      </div>
      <p class="hint">{{localize "CALENDARIA.Settings.MiniCalShowCycles.Hint"}}</p>
    </div>

    <div class="form-group{{#unless miniCalShowCycles}} disabled{{/unless}}">
      <label for="miniCalCyclesDisplayMode">{{localize "CALENDARIA.Common.CyclesDisplay"}}</label>
      <div class="form-fields">
        <select id="miniCalCyclesDisplayMode" name="miniCalCyclesDisplayMode" {{#unless miniCalShowCycles}}disabled
          aria-disabled="true" {{/unless}}>
          {{#each miniCalCyclesDisplayModeOptions}}
            <option value="{{this.value}}" {{#if this.selected}}selected{{/if}}>{{this.label}}</option>
          {{/each}}
        </select>
      </div>
      <p class="hint">{{localize "CALENDARIA.Settings.MiniCalCyclesDisplayMode.Hint"}}</p>
    </div>


    <div class="form-group">
      <label for="miniCalHeaderShowSelected">{{localize "CALENDARIA.Common.ShowSelectedDateInHeader"}}</label>
      <div class="form-fields">
        <input type="checkbox" id="miniCalHeaderShowSelected" name="miniCalHeaderShowSelected"
          {{#if miniCalHeaderShowSelected}}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="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>
  {{/if}}

  {{#if isGM}}
    <fieldset data-section="minical-time-jumps">
      <legend>
        {{localize "CALENDARIA.SettingsPanel.Section.CustomTimeJumps"}}
        <button type="button" class="reset-section" data-action="resetSection" data-section="minical-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 miniCalTimeJumps}}
          <div class="time-jumps-row">
            <label>{{label}}</label>
            <input type="number" name="miniCalTimeJumps.{{key}}.dec2" value="{{jumps.dec2}}"
              aria-label="{{label}} {{localize "CALENDARIA.SettingsPanel.TimeJumps.MajorDecrement"}}">
            <input type="number" name="miniCalTimeJumps.{{key}}.dec1" value="{{jumps.dec1}}"
              aria-label="{{label}} {{localize "CALENDARIA.SettingsPanel.TimeJumps.MinorDecrement"}}">
            <input type="number" name="miniCalTimeJumps.{{key}}.inc1" value="{{jumps.inc1}}"
              aria-label="{{label}} {{localize "CALENDARIA.SettingsPanel.TimeJumps.MinorIncrement"}}">
            <input type="number" name="miniCalTimeJumps.{{key}}.inc2" value="{{jumps.inc2}}"
              aria-label="{{label}} {{localize "CALENDARIA.SettingsPanel.TimeJumps.MajorIncrement"}}">
          </div>
        {{/each}}
      </div>
    </fieldset>
  {{/if}}

  <fieldset data-section="minical-sticky">
    <legend>
      {{localize "CALENDARIA.SettingsPanel.Section.StickyStates"}}
      <button type="button" class="reset-section" data-action="resetSection" data-section="minical-sticky" data-tooltip
        aria-label="{{localize "CALENDARIA.SettingsPanel.ResetSection.Tooltip"}}"><i class="fas fa-undo"></i></button>
    </legend>
    <input type="hidden" name="miniCalStickySection" value="1">
    <p class="hint section-hint">{{localize "CALENDARIA.SettingsPanel.Hint.StickyStates"}}</p>

    <div class="form-group">
      <label for="miniCalStickyTimeControls">{{localize "CALENDARIA.Common.StickyTimeControls"}}</label>
      <div class="form-fields">
        <input type="checkbox" id="miniCalStickyTimeControls" name="miniCalStickyTimeControls"
          {{#if miniCalStickyTimeControls}}checked{{/if}}>
      </div>
      <p class="hint">{{localize "CALENDARIA.SettingsPanel.Hint.StickyTimeControls"}}</p>
    </div>

    <div class="form-group">
      <label for="miniCalStickySidebar">{{localize "CALENDARIA.SettingsPanel.Sticky.Sidebar"}}</label>
      <div class="form-fields">
        <input type="checkbox" id="miniCalStickySidebar" name="miniCalStickySidebar"
          {{#if miniCalStickySidebar}}checked{{/if}}>
      </div>
      <p class="hint">{{localize "CALENDARIA.SettingsPanel.Hint.StickySidebar"}}</p>
    </div>

    <div class="form-group">
      <label for="miniCalStickyPosition">{{localize "CALENDARIA.Common.LockPosition"}}</label>
      <div class="form-fields">
        <input type="checkbox" id="miniCalStickyPosition" name="miniCalStickyPosition"
          {{#if miniCalStickyPosition}}checked{{/if}}>
      </div>
      <p class="hint">{{localize "CALENDARIA.SettingsPanel.Hint.StickyPosition"}}</p>
    </div>
  </fieldset>

</section>
