<section class="tab {{tab.cssClass}}" data-tab="{{tab.id}}" data-group="{{tab.group}}">
  {{#if preset}}
    <div class="preset-editor standard-form">

      {{!-- Weather Info --}}
      <fieldset>
        <legend>{{localize "CALENDARIA.WeatherEditor.WeatherInfo"}}</legend>
        <div class="form-group">
          <label for="{{preset.id}}-label">{{localize "CALENDARIA.Common.Name"}}</label>
          <div class="form-fields">
            <input type="text" id="{{preset.id}}-label" name="{{preset.id}}.label" value="{{preset.label}}">
          </div>
          <p class="hint">{{localize "CALENDARIA.WeatherEditor.NameHint"}}</p>
        </div>

        <div class="form-group">
          <label for="{{preset.id}}-icon">{{localize "CALENDARIA.Common.Icon"}}</label>
          <div class="form-fields">
            <input type="text" id="{{preset.id}}-icon" name="{{preset.id}}.icon" value="{{preset.icon}}"
              placeholder="fa-cloud">
          </div>
          <p class="hint">{{localize "CALENDARIA.WeatherEditor.IconHint"}}</p>
        </div>

        <div class="form-group">
          <label for="{{preset.id}}-color">{{localize "CALENDARIA.Common.Color"}}</label>
          <div class="form-fields">
            <color-picker name="{{preset.id}}.color" value="{{preset.color}}"></color-picker>
          </div>
          <p class="hint">{{localize "CALENDARIA.WeatherEditor.ColorHint"}}</p>
        </div>

        <div class="form-group">
          <label for="{{preset.id}}-hudEffect">{{localize "CALENDARIA.WeatherEditor.HudEffect"}}</label>
          <div class="form-fields">
            <select id="{{preset.id}}-hudEffect" name="{{preset.id}}.hudEffect">
              {{#each hudEffectOptions}}
                <option value="{{this.value}}" {{#if this.selected}}selected{{/if}}>{{this.label}}</option>
              {{/each}}
            </select>
          </div>
          <p class="hint">{{localize "CALENDARIA.WeatherEditor.HudEffectHint"}}</p>
        </div>

        {{#if hasFXMaster}}
          <div class="form-group">
            <label for="{{preset.id}}-fxPreset">{{localize "CALENDARIA.WeatherEditor.FxPreset"}}</label>
            <div class="form-fields">
              <select id="{{preset.id}}-fxPreset" name="{{preset.id}}.fxPreset">
                {{#each fxPresetOptions}}
                  <option value="{{this.value}}" {{#if this.selected}}selected{{/if}}>{{this.label}}</option>
                {{/each}}
              </select>
            </div>
            <p class="hint">{{localize "CALENDARIA.WeatherEditor.FxPresetHint"}}</p>
          </div>
        {{/if}}

        <div class="form-group">
          <label for="{{preset.id}}-soundFx">{{localize "CALENDARIA.WeatherEditor.SoundFile"}}</label>
          <div class="form-fields">
            <input type="text" id="{{preset.id}}-soundFx" name="{{preset.id}}.soundFx" value="{{preset.soundFx}}"
              placeholder="modules/calendaria/assets/sound/...">
            <button type="button" class="sound-file-picker" data-target="{{preset.id}}.soundFx"
              data-tooltip="{{localize 'FILES.BrowseTooltip'}}">
              <i class="fas fa-file-audio"></i>
            </button>
          </div>
          <p class="hint">{{localize "CALENDARIA.WeatherEditor.SoundFileHint"}}</p>
        </div>
        <div class="form-group">
          <label for="{{preset.id}}-fxMacro">{{localize "CALENDARIA.WeatherEditor.FxMacro"}}</label>
          <div class="form-fields">
            <select id="{{preset.id}}-fxMacro" name="{{preset.id}}.fxMacro">
              {{#each fxMacroOptions}}
                <option value="{{this.value}}" {{#if this.selected}}selected{{/if}}>{{this.label}}</option>
              {{/each}}
            </select>
          </div>
          <p class="hint">{{localize "CALENDARIA.WeatherEditor.FxMacroHint"}}</p>
        </div>
      </fieldset>

      {{!-- Environment Lighting --}}
      <fieldset>
        <legend>{{localize "CALENDARIA.WeatherEditor.EnvironmentLighting"}}</legend>
        <p class="hint">{{localize "CALENDARIA.WeatherEditor.EnvironmentLightingHint"}}</p>

        {{!-- Day (Base) --}}
        <fieldset>
          <legend>{{localize "SCENE.Environment.Base"}}</legend>
          <div class="form-group">
            <label>{{localize "SCENE.FIELDS.environment.base.luminosity.label"}}</label>
            <div class="form-fields">
              <range-picker name="{{preset.id}}.baseLuminosity" value="{{preset.baseLuminosity}}" min="-1" max="1"
                step="0.05"></range-picker>
            </div>
            <p class="hint">{{localize "SCENE.FIELDS.environment.base.luminosity.hint"}}</p>
          </div>
          <div class="form-group">
            <label>{{localize "SCENE.FIELDS.environment.base.saturation.label"}}</label>
            <div class="form-fields">
              <range-picker name="{{preset.id}}.baseColorSaturation" value="{{preset.baseColorSaturation}}" min="-1"
                max="1" step="0.05"></range-picker>
            </div>
            <p class="hint">{{localize "SCENE.FIELDS.environment.base.saturation.hint"}}</p>
          </div>
          <div class="form-group">
            <label>{{localize "SCENE.FIELDS.environment.base.shadows.label"}}</label>
            <div class="form-fields">
              <range-picker name="{{preset.id}}.baseShadows" value="{{preset.baseShadows}}" min="0" max="1"
                step="0.05"></range-picker>
            </div>
            <p class="hint">{{localize "SCENE.FIELDS.environment.base.shadows.hint"}}</p>
          </div>
          <div class="form-group">
            <label>{{localize "SCENE.FIELDS.environment.base.hue.label"}}</label>
            <div class="form-fields">
              <hue-slider name="{{preset.id}}.baseHue" value="{{preset.baseHueNorm}}"></hue-slider>
            </div>
            <p class="hint">{{localize "SCENE.FIELDS.environment.base.hue.hint"}}</p>
          </div>
          <div class="form-group">
            <label>{{localize "SCENE.FIELDS.environment.base.intensity.label"}}</label>
            <div class="form-fields">
              <range-picker name="{{preset.id}}.baseSaturation" value="{{preset.baseSaturation}}" min="0" max="1"
                step="0.05"></range-picker>
            </div>
            <p class="hint">{{localize "SCENE.FIELDS.environment.base.intensity.hint"}}</p>
          </div>
          <div class="form-group">
            <label>{{localize "SCENE.FIELDS.environment.cycle.label"}}</label>
            <div class="form-fields">
              <input type="checkbox" name="{{preset.id}}.environmentCycle"
                {{#if preset.environmentCycle}}checked{{/if}}>
            </div>
            <p class="hint">{{localize "SCENE.FIELDS.environment.cycle.hint"}}</p>
          </div>
          <div class="form-group">
            <label>{{localize "CALENDARIA.WeatherEditor.DarknessPenalty"}}</label>
            <div class="form-fields">
              <range-picker name="{{preset.id}}.darknessPenalty" value="{{preset.darknessPenalty}}" min="0" max="1"
                step="0.05"></range-picker>
            </div>
            <p class="hint">{{localize "CALENDARIA.WeatherEditor.DarknessPenaltyHint"}}</p>
          </div>
        </fieldset>

        {{!-- Night (Dark) --}}
        <fieldset>
          <legend>{{localize "SCENE.Environment.Dark"}}</legend>
          <div class="form-group">
            <label>{{localize "SCENE.FIELDS.environment.base.luminosity.label"}}</label>
            <div class="form-fields">
              <range-picker name="{{preset.id}}.darkLuminosity" value="{{preset.darkLuminosity}}" min="-1" max="1"
                step="0.05"></range-picker>
            </div>
          </div>
          <div class="form-group">
            <label>{{localize "SCENE.FIELDS.environment.base.saturation.label"}}</label>
            <div class="form-fields">
              <range-picker name="{{preset.id}}.darkColorSaturation" value="{{preset.darkColorSaturation}}" min="-1"
                max="1" step="0.05"></range-picker>
            </div>
          </div>
          <div class="form-group">
            <label>{{localize "SCENE.FIELDS.environment.base.shadows.label"}}</label>
            <div class="form-fields">
              <range-picker name="{{preset.id}}.darkShadows" value="{{preset.darkShadows}}" min="0" max="1"
                step="0.05"></range-picker>
            </div>
          </div>
          <div class="form-group">
            <label>{{localize "SCENE.FIELDS.environment.base.hue.label"}}</label>
            <div class="form-fields">
              <hue-slider name="{{preset.id}}.darkHue" value="{{preset.darkHueNorm}}"></hue-slider>
            </div>
          </div>
          <div class="form-group">
            <label>{{localize "SCENE.FIELDS.environment.base.intensity.label"}}</label>
            <div class="form-fields">
              <range-picker name="{{preset.id}}.darkSaturation" value="{{preset.darkSaturation}}" min="0" max="1"
                step="0.05"></range-picker>
            </div>
          </div>
        </fieldset>
      </fieldset>

      {{!-- HUD Visuals --}}
      <fieldset>
        <legend>{{localize "CALENDARIA.WeatherEditor.HudVisuals"}}</legend>
        <p class="hint">{{localize "CALENDARIA.WeatherEditor.HudVisualsHint"}}</p>

        <div class="form-group">
          <label>{{localize "CALENDARIA.WeatherEditor.Visuals.Count"}}</label>
          <div class="form-fields range">
            <input type="number" name="{{preset.id}}.vo-count-min" value="{{visuals.countMin}}" min="0" max="500"
              step="1">
            <i class="fa-solid fa-right-long"></i>
            <input type="number" name="{{preset.id}}.vo-count-max" value="{{visuals.countMax}}" min="0" max="500"
              step="1">
          </div>
          <p class="hint">{{localize "CALENDARIA.WeatherEditor.Visuals.CountHint"}}</p>
        </div>
        <div class="form-group">
          <label>{{localize "CALENDARIA.WeatherEditor.Visuals.Scale"}}</label>
          <div class="form-fields range">
            <input type="number" name="{{preset.id}}.vo-scale-min" value="{{visuals.scaleMin}}" min="0" max="10"
              step="0.1">
            <i class="fa-solid fa-right-long"></i>
            <input type="number" name="{{preset.id}}.vo-scale-max" value="{{visuals.scaleMax}}" min="0" max="10"
              step="0.1">
          </div>
          <p class="hint">{{localize "CALENDARIA.WeatherEditor.Visuals.ScaleHint"}}</p>
        </div>
        <div class="form-group">
          <label>{{localize "CALENDARIA.WeatherEditor.Visuals.Alpha"}}</label>
          <div class="form-fields range">
            <input type="number" name="{{preset.id}}.vo-alpha-min" value="{{visuals.alphaMin}}" min="0" max="1"
              step="0.05">
            <i class="fa-solid fa-right-long"></i>
            <input type="number" name="{{preset.id}}.vo-alpha-max" value="{{visuals.alphaMax}}" min="0" max="1"
              step="0.05">
          </div>
          <p class="hint">{{localize "CALENDARIA.WeatherEditor.Visuals.AlphaHint"}}</p>
        </div>
        <div class="form-group">
          <label>{{localize "CALENDARIA.WeatherEditor.Visuals.SpeedX"}}</label>
          <div class="form-fields range">
            <input type="number" name="{{preset.id}}.vo-speedx-min" value="{{visuals.speedXMin}}" step="0.1">
            <i class="fa-solid fa-right-long"></i>
            <input type="number" name="{{preset.id}}.vo-speedx-max" value="{{visuals.speedXMax}}" step="0.1">
          </div>
          <p class="hint">{{localize "CALENDARIA.WeatherEditor.Visuals.SpeedXHint"}}</p>
        </div>
        <div class="form-group">
          <label>{{localize "CALENDARIA.WeatherEditor.Visuals.SpeedY"}}</label>
          <div class="form-fields range">
            <input type="number" name="{{preset.id}}.vo-speedy-min" value="{{visuals.speedYMin}}" step="0.1">
            <i class="fa-solid fa-right-long"></i>
            <input type="number" name="{{preset.id}}.vo-speedy-max" value="{{visuals.speedYMax}}" step="0.1">
          </div>
          <p class="hint">{{localize "CALENDARIA.WeatherEditor.Visuals.SpeedYHint"}}</p>
        </div>
        <div class="form-group">
          <label>{{localize "CALENDARIA.WeatherEditor.Visuals.Gravity"}}</label>
          <div class="form-fields">
            <input type="number" name="{{preset.id}}.vo-gravity" value="{{visuals.gravity}}" step="0.005">
          </div>
          <p class="hint">{{localize "CALENDARIA.WeatherEditor.Visuals.GravityHint"}}</p>
        </div>
        <div class="form-group">
          <label>{{localize "CALENDARIA.WeatherEditor.Visuals.Wobble"}}</label>
          <div class="form-fields">
            <input type="number" name="{{preset.id}}.vo-wobble" value="{{visuals.wobble}}" step="0.005">
          </div>
          <p class="hint">{{localize "CALENDARIA.WeatherEditor.Visuals.WobbleHint"}}</p>
        </div>
        <div class="form-group">
          <label>{{localize "CALENDARIA.WeatherEditor.Visuals.PrimaryColor"}}</label>
          <div class="form-fields">
            <color-picker name="{{preset.id}}.vo-tint-primary" value="{{visuals.tintPrimary}}"></color-picker>
          </div>
          <p class="hint">{{localize "CALENDARIA.WeatherEditor.Visuals.PrimaryColorHint"}}</p>
        </div>
        <div class="form-group">
          <label>{{localize "CALENDARIA.WeatherEditor.Visuals.SecondaryColor"}}</label>
          <div class="form-fields">
            <color-picker name="{{preset.id}}.vo-tint-secondary" value="{{visuals.tintSecondary}}"></color-picker>
          </div>
          <p class="hint">{{localize "CALENDARIA.WeatherEditor.Visuals.SecondaryColorHint"}}</p>
        </div>

        <div class="form-group">
          <label>{{localize "CALENDARIA.WeatherEditor.Visuals.SkyStrength"}}</label>
          <div class="form-fields">
            <range-picker name="{{preset.id}}.so-strength" value="{{sky.strength}}" min="0" max="1"
              step="0.05"></range-picker>
          </div>
          <p class="hint">{{localize "CALENDARIA.WeatherEditor.Visuals.SkyStrengthHint"}}</p>
        </div>
        <div class="form-group">
          <label>{{localize "CALENDARIA.WeatherEditor.Visuals.SkyTop"}}</label>
          <div class="form-fields">
            <color-picker name="{{preset.id}}.so-top" value="{{sky.top}}"></color-picker>
          </div>
          <p class="hint">{{localize "CALENDARIA.WeatherEditor.Visuals.SkyTopHint"}}</p>
        </div>
        <div class="form-group">
          <label>{{localize "CALENDARIA.WeatherEditor.Visuals.SkyMid"}}</label>
          <div class="form-fields">
            <color-picker name="{{preset.id}}.so-mid" value="{{sky.mid}}"></color-picker>
          </div>
          <p class="hint">{{localize "CALENDARIA.WeatherEditor.Visuals.SkyMidHint"}}</p>
        </div>
        <div class="form-group">
          <label>{{localize "CALENDARIA.WeatherEditor.Visuals.SkyBottom"}}</label>
          <div class="form-fields">
            <color-picker name="{{preset.id}}.so-bottom" value="{{sky.bottom}}"></color-picker>
          </div>
          <p class="hint">{{localize "CALENDARIA.WeatherEditor.Visuals.SkyBottomHint"}}</p>
        </div>
      </fieldset>

    </div>
  {{else}}
    <div class="no-preset-selected">
      <p>{{localize "CALENDARIA.WeatherEditor.SelectWeather"}}</p>
    </div>
  {{/if}}
</section>
