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

  {{#if isGM}}
    <fieldset data-section="canvas-sticky-zones">
      <legend>
        {{localize "CALENDARIA.Settings.StickyZones.Name"}}
        <button type="button" class="reset-section" data-action="resetSection" data-section="canvas-sticky-zones"
          data-tooltip aria-label="{{localize "CALENDARIA.SettingsPanel.ResetSection.Tooltip"}}"><i
            class="fas fa-undo"></i></button>
      </legend>

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

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

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

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

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

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

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

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

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

      <div class="form-group">
        <label
          for="defaultBrightnessMultiplier">{{localize "CALENDARIA.Settings.DefaultBrightnessMultiplier.Name"}}</label>
        <div class="form-fields range-field">
          <div class="slider-with-ticks">
            <input type="range" id="defaultBrightnessMultiplier" name="defaultBrightnessMultiplier" min="0.5" max="1.5"
              step="0.1" value="{{defaultBrightnessMultiplier}}" list="brightness-ticks">
            <datalist id="brightness-ticks">
              <option value="0.5"></option>
              <option value="1"></option>
              <option value="1.5"></option>
            </datalist>
            <div class="slider-ticks">
              <span></span><span></span><span></span>
            </div>
          </div>
          <span class="range-value">{{defaultBrightnessMultiplier}}x</span>
        </div>
        <p class="hint">{{localize "CALENDARIA.Settings.DefaultBrightnessMultiplier.Hint"}}</p>
      </div>

      <div class="form-group">
        <label for="ambienceIntensity">{{localize "CALENDARIA.Settings.AmbienceIntensity.Name"}}</label>
        <div class="form-fields range-field">
          <div class="slider-with-ticks">
            <input type="range" id="ambienceIntensity" name="ambienceIntensity" min="0" max="6" step="0.25"
              value="{{ambienceIntensity}}" list="ambience-intensity-ticks">
            <datalist id="ambience-intensity-ticks">
              <option value="0"></option>
              <option value="1"></option>
              <option value="3"></option>
              <option value="6"></option>
            </datalist>
            <div class="slider-ticks">
              <span></span><span></span><span></span><span></span>
            </div>
          </div>
          <span class="range-value">{{ambienceIntensity}}x</span>
        </div>
        <p class="hint">{{localize "CALENDARIA.Settings.AmbienceIntensity.Hint"}}</p>
      </div>

      <div class="form-group">
        <label
          for="weatherAmbienceIntensity">{{localize "CALENDARIA.Settings.WeatherAmbienceIntensity.Name"}}</label>
        <div class="form-fields range-field">
          <div class="slider-with-ticks">
            <input type="range" id="weatherAmbienceIntensity" name="weatherAmbienceIntensity" min="0" max="1" step="0.1"
              value="{{weatherAmbienceIntensity}}" list="weather-ambience-ticks">
            <datalist id="weather-ambience-ticks">
              <option value="0"></option>
              <option value="0.5"></option>
              <option value="1"></option>
            </datalist>
            <div class="slider-ticks">
              <span></span><span></span><span></span>
            </div>
          </div>
          <span class="range-value">{{weatherAmbienceIntensity}}</span>
        </div>
        <p class="hint">{{localize "CALENDARIA.Settings.WeatherAmbienceIntensity.Hint"}}</p>
      </div>
    </fieldset>
  {{/if}}

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

</section>
