<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="stopwatch">
      <i class="fas fa-undo"></i>
      {{localize "CALENDARIA.Common.ResetPosition"}}
    </button>
    <button type="button" data-action="closeStopwatch">
      <i class="fas fa-times"></i>
      {{localize "CALENDARIA.SettingsPanel.CloseStopwatch"}}
    </button>
    <button type="button" data-action="openStopwatch">
      <i class="fas fa-external-link-alt"></i>
      {{localize "CALENDARIA.Common.OpenStopWatch"}}
    </button>
  </div>
  <p class="hint section-hint">{{openHint}}</p>

  <fieldset data-section="stopwatch-display">
    <legend>
      {{localize "CALENDARIA.SettingsPanel.Section.Display"}}
      <button type="button" class="reset-section" data-action="resetSection" data-section="stopwatch-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="showStopwatch">{{localize "CALENDARIA.Settings.ShowStopwatch.Name"}}</label>
        <div class="form-fields">
          <input type="checkbox" id="showStopwatch" name="showStopwatch" {{#if showStopwatch}}checked{{/if}}>
        </div>
        <p class="hint">{{localize "CALENDARIA.Settings.ShowStopwatch.Hint"}}</p>
      </div>

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

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

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

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

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

  {{#if isGM}}
    <fieldset data-section="stopwatch-formats">
      <legend>
        {{localize "CALENDARIA.Common.StopWatch"}}
        <button type="button" class="legend-help" data-action="showTokenReference" data-context-type="stopwatch"
          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="HH:mm:ss.SSS" 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="HH:mm:ss.SSS"
                class="format-custom-input {{#unless isCustomPlayer}}hidden{{/unless}}" data-location="{{id}}"
                data-role="player">
            </div>
          </div>
        </div>
      {{/each}}
    </fieldset>
  {{/if}}

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

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

</section>
