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

  {{#if isGM}}
    <fieldset data-section="weather-generation">
      <legend>{{localize "CALENDARIA.SettingsPanel.Section.WeatherGeneration"}}</legend>

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

      <div class="form-group">
        <label for="weatherInertia">{{localize "CALENDARIA.Settings.WeatherInertia.Name"}}</label>
        <div class="form-fields">
          <range-picker name="weatherInertia" value="{{weatherInertia}}" min="0" max="1" step="0.05"></range-picker>
        </div>
        <p class="hint">{{localize "CALENDARIA.Settings.WeatherInertia.Hint"}}</p>
      </div>

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

      <div class="form-group">
        <label for="intradayCarryOver">{{localize "CALENDARIA.Settings.IntradayCarryOver.Name"}}</label>
        <div class="form-fields">
          <range-picker name="intradayCarryOver" value="{{intradayCarryOver}}" min="0" max="100"
            step="5"></range-picker>
        </div>
        <p class="hint">{{localize "CALENDARIA.Settings.IntradayCarryOver.Hint"}}</p>
      </div>

      <div class="form-group">
        <label for="weatherHistoryDays">{{localize "CALENDARIA.Settings.WeatherHistoryDays.Name"}}</label>
        <div class="form-fields">
          <input type="number" id="weatherHistoryDays" name="weatherHistoryDays" value="{{weatherHistoryDays}}" min="0"
            max="3650" step="1" />
        </div>
        <p class="hint">{{localize "CALENDARIA.Settings.WeatherHistoryDays.Hint"}}</p>
      </div>

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

      <div class="form-group">
        <label for="weatherSoundVolume">{{localize "CALENDARIA.Settings.Weather.SoundVolume.Name"}}</label>
        <div class="form-fields">
          <range-picker name="weatherSoundVolume" value="{{weatherSoundVolume}}" min="0" max="1"
            step="0.05"></range-picker>
        </div>
        <p class="hint">{{localize "CALENDARIA.Settings.Weather.SoundVolume.Hint"}}</p>
      </div>

      <div class="form-group">
        <label for="weatherSuppressMuffle">{{localize "CALENDARIA.Settings.Weather.SuppressMuffle.Name"}}</label>
        <div class="form-fields">
          <range-picker name="weatherSuppressMuffle" value="{{weatherSuppressMuffle}}" min="0" max="1"
            step="0.05"></range-picker>
        </div>
        <p class="hint">{{localize "CALENDARIA.Settings.Weather.SuppressMuffle.Hint"}}</p>
      </div>
    </fieldset>
  {{/if}}

  {{#if isGM}}
    <fieldset data-section="weather-forecast">
      <legend>{{localize "CALENDARIA.Weather.Forecast"}}</legend>

      <div class="form-group">
        <label for="forecastAccuracy">{{localize "CALENDARIA.Settings.ForecastAccuracy.Name"}}</label>
        <div class="form-fields">
          <range-picker name="forecastAccuracy" value="{{forecastAccuracy}}" min="0" max="100" step="5"></range-picker>
        </div>
        <p class="hint">{{localize "CALENDARIA.Settings.ForecastAccuracy.Hint"}}</p>
      </div>

      <div class="form-group">
        <label for="forecastDays">{{localize "CALENDARIA.Settings.ForecastDays.Name"}}</label>
        <div class="form-fields">
          <input type="number" id="forecastDays" name="forecastDays" value="{{forecastDays}}" min="1" max="30"
            step="1" />
        </div>
        <p class="hint">{{localize "CALENDARIA.Settings.ForecastDays.Hint"}}</p>
      </div>

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

      <div class="form-group">
        <label>{{localize "CALENDARIA.Settings.RegenerateWeather.Name"}}</label>
        <div class="form-fields">
          <button type="button" data-action="regenerateAllWeather" class="add-button">
            <i class="fas fa-arrows-rotate"></i>
            {{localize "CALENDARIA.Settings.RegenerateWeather.Name"}}
          </button>
        </div>
        <p class="hint">{{localize "CALENDARIA.Settings.RegenerateWeather.Hint"}}</p>
      </div>
    </fieldset>
  {{/if}}

  {{#if isGM}}
    <fieldset data-section="climate">
      <legend>{{localize "CALENDARIA.SettingsPanel.Section.Climate"}}</legend>
      <div class="form-group">
        <label>{{localize "CALENDARIA.Settings.CalendarEditor.Label"}}</label>
        <div class="form-fields">
          <button type="button" data-action="openCalendarEditor" class="add-button">
            <i class="fas fa-calendar-plus"></i>
            {{localize "CALENDARIA.Settings.CalendarEditor.Label"}}
          </button>
        </div>
        <p class="hint">{{localize "CALENDARIA.SettingsPanel.Hint.ClimateConfig"}}</p>
      </div>

      {{#if hasZones}}
        <div class="form-group">
          <label for="climateZone">{{localize "CALENDARIA.SettingsPanel.Field.ClimateZone"}}</label>
          <div class="form-fields">
            <select id="climateZone" name="climateZone">
              {{#each zoneOptions}}
                <option value="{{this.value}}" {{#if this.selected}}selected{{/if}}>{{this.label}}</option>
              {{/each}}
            </select>
          </div>
          <p class="hint">{{localize "CALENDARIA.SettingsPanel.Hint.ClimateZone"}}</p>
        </div>

        <div class="form-group">
          <label>{{localize "CALENDARIA.WeatherProbability.Title"}}</label>
          <div class="form-fields">
            <button type="button" data-action="openWeatherProbabilities" class="add-button">
              <i class="fas fa-chart-pie"></i>
              {{localize "CALENDARIA.WeatherProbability.Title"}}
            </button>
          </div>
          <p class="hint">{{localize "CALENDARIA.WeatherProbability.Hint"}}</p>
        </div>
      {{/if}}
    </fieldset>
  {{/if}}

  {{#if isGM}}
    <fieldset data-section="weather-presets">
      <legend>{{localize "CALENDARIA.WeatherEditor.Title"}}</legend>
      <div class="form-group">
        <label>{{localize "CALENDARIA.WeatherEditor.Title"}}</label>
        <div class="form-fields">
          <button type="button" data-action="openWeatherEditor" class="add-button">
            <i class="fas fa-cloud-sun"></i>
            {{localize "CALENDARIA.WeatherEditor.OpenEditor"}}
          </button>
        </div>
        <p class="hint">{{localize "CALENDARIA.WeatherEditor.SectionHint"}}</p>
      </div>
    </fieldset>
  {{/if}}

  {{#if isGM}}
    <fieldset data-section="fxmaster">
      <legend>{{localize "CALENDARIA.Settings.FXMaster.SectionTitle"}}</legend>

      {{#unless fxmasterActive}}
        <p class="hint">{{localize "CALENDARIA.Settings.FXMaster.Inactive"}}</p>
      {{/unless}}

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

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

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

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

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

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

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

        {{#if fxmasterDarknessActivationEnabled}}
          <div class="form-group">
            <label for="fxmasterDarknessActivationMin">{{localize "CALENDARIA.Settings.FXMaster.DarknessActivationMin.Name"}}</label>
            <div class="form-fields range-field">
              <input type="range" id="fxmasterDarknessActivationMin" name="fxmasterDarknessActivationMin" min="0" max="1"
                step="0.05" value="{{fxmasterDarknessActivationMin}}">
              <span class="range-value">{{fxmasterDarknessActivationMin}}</span>
            </div>
            <p class="hint">{{localize "CALENDARIA.Settings.FXMaster.DarknessActivationMin.Hint"}}</p>
          </div>

          <div class="form-group">
            <label for="fxmasterDarknessActivationMax">{{localize "CALENDARIA.Settings.FXMaster.DarknessActivationMax.Name"}}</label>
            <div class="form-fields range-field">
              <input type="range" id="fxmasterDarknessActivationMax" name="fxmasterDarknessActivationMax" min="0" max="1"
                step="0.05" value="{{fxmasterDarknessActivationMax}}">
              <span class="range-value">{{fxmasterDarknessActivationMax}}</span>
            </div>
            <p class="hint">{{localize "CALENDARIA.Settings.FXMaster.DarknessActivationMax.Hint"}}</p>
          </div>
        {{/if}}

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

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

        <div class="form-group">
          <label for="fxmasterSpeedMultiplier">{{localize "CALENDARIA.Settings.FXMaster.SpeedMultiplier.Name"}}</label>
          <div class="form-fields range-field">
            <div class="slider-with-ticks">
              <input type="range" id="fxmasterSpeedMultiplier" name="fxmasterSpeedMultiplier" min="0" max="3" step="0.1"
                value="{{fxmasterSpeedMultiplier}}" list="fxmaster-speed-ticks">
              <datalist id="fxmaster-speed-ticks">
                <option value="0"></option>
                <option value="1"></option>
                <option value="3"></option>
              </datalist>
              <div class="slider-ticks">
                <span></span><span></span><span></span>
              </div>
            </div>
            <span class="range-value">{{fxmasterSpeedMultiplier}}x</span>
          </div>
          <p class="hint">{{localize "CALENDARIA.Settings.FXMaster.SpeedMultiplier.Hint"}}</p>
        </div>

      {{/if}}
    </fieldset>
  {{/if}}

  {{#if isGM}}
    <fieldset data-section="weather-units">
      <legend>
        {{localize "CALENDARIA.SettingsPanel.Section.Units"}}
        <button type="button" class="reset-section" data-action="resetSection" data-section="weather-units" data-tooltip
          aria-label="{{localize "CALENDARIA.SettingsPanel.ResetSection.Tooltip"}}"><i class="fas fa-undo"></i></button>
      </legend>

      <div class="form-group">
        <label for="temperatureUnit">{{localize "CALENDARIA.Common.Temperature"}}</label>
        <div class="form-fields">
          <select id="temperatureUnit" name="temperatureUnit">
            {{#each temperatureUnitOptions}}
              <option value="{{this.value}}" {{#if this.selected}}selected{{/if}}>{{this.label}}</option>
            {{/each}}
          </select>
        </div>
        <p class="hint">{{localize "CALENDARIA.Settings.TemperatureUnit.Hint"}}</p>
      </div>

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

      <div class="form-group">
        <label for="precipitationUnit">{{localize "CALENDARIA.Common.Precipitation"}}</label>
        <div class="form-fields">
          <select id="precipitationUnit" name="precipitationUnit">
            {{#each precipitationUnitOptions}}
              <option value="{{this.value}}" {{#if this.selected}}selected{{/if}}>{{this.label}}</option>
            {{/each}}
          </select>
        </div>
        <p class="hint">{{localize "CALENDARIA.Settings.PrecipitationUnit.Hint"}}</p>
      </div>

      <div class="form-group">
        <label for="windSpeedUnit">{{localize "CALENDARIA.Settings.WindSpeedUnit.Name"}}</label>
        <div class="form-fields">
          <select id="windSpeedUnit" name="windSpeedUnit">
            {{#each windSpeedUnitOptions}}
              <option value="{{this.value}}" {{#if this.selected}}selected{{/if}}>{{this.label}}</option>
            {{/each}}
          </select>
        </div>
        <p class="hint">{{localize "CALENDARIA.Settings.WindSpeedUnit.Hint"}}</p>
      </div>
    </fieldset>
  {{/if}}

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

</section>
