<div class="content">
  <div class="zone-info-bar standard-form">
    <div class="form-group">
      <label
        data-tooltip="{{localize 'CALENDARIA.Weather.Picker.SceneZoneHint'}}">{{localize "CALENDARIA.Weather.Picker.SceneZone"}}</label>
      <div class="form-fields">
        <select name="sceneZone">
          <option value="">{{localize "CALENDARIA.Weather.Picker.NoZone"}}</option>
          {{#each zoneOptions}}
            <option value="{{this.value}}" {{#if this.selected}}selected{{/if}}>{{this.label}}</option>
          {{/each}}
        </select>
      </div>
    </div>
  </div>

  {{#if intradayEnabled}}
    <div class="period-selector">
      {{#each periods}}
        <button type="button" class="period-tab {{#if selected}}active{{/if}} {{#if isCurrent}}current{{/if}}"
          data-action="selectPeriod" data-period-id="{{id}}"
          data-tooltip="{{label}}{{#if isCurrent}} ({{localize 'CALENDARIA.Common.Current'}}){{/if}}">
          <i class="fas {{icon}}"></i>
          <span>{{label}}</span>
        </button>
      {{/each}}
    </div>
  {{/if}}

  <div class="columns">
    <div class="presets">
      {{#each categories}}
        <div class="weather-category">
          <span class="category-header">{{label}}</span>
          <div class="weather-buttons">
            {{#each presets}}
              <button type="button"
                class="weather-btn {{#if selected}}active{{/if}} {{#unless zoneEnabled}}zone-disabled{{/unless}}"
                data-action="selectWeather" data-preset-id="{{id}}" style="--weather-color: {{color}}" data-tooltip
                aria-label="{{tooltip}}">
                <i class="fas {{icon}}"></i>
                <span class="weather-label">{{label}}</span>
              </button>
            {{/each}}
          </div>
        </div>
      {{/each}}
    </div>

    <div class="details standard-form">
      <span class="category-header">{{localize "CALENDARIA.Weather.Picker.Custom"}}</span>
      <div class="form-group">
        <label for="customLabel"
          data-tooltip="{{localize 'CALENDARIA.Weather.Picker.CustomHint'}}">{{localize "CALENDARIA.Common.Name"}}</label>
        <div class="form-fields">
          <input type="text" id="customLabel" name="customLabel" value="{{customLabel}}">
        </div>
      </div>
      <div class="form-group">
        <label for="customTemp"
          data-tooltip="{{localize 'CALENDARIA.Weather.Picker.CustomTempHint'}}">{{localize "CALENDARIA.Common.Temperature"}}
          ({{temperatureUnit}})</label>
        <div class="form-fields">
          <input type="number" id="customTemp" name="customTemp" value="{{customTemp}}">
        </div>
      </div>
      <div class="form-group">
        <label for="customIcon"
          data-tooltip="{{localize 'CALENDARIA.Common.IconHint'}}">{{localize "CALENDARIA.Common.Icon"}}</label>
        <div class="form-fields">
          <input type="text" id="customIcon" name="customIcon" value="{{customIcon}}" placeholder="fa-cloud-sun">
        </div>
      </div>
      <div class="form-group">
        <label for="customColor"
          data-tooltip="{{localize 'CALENDARIA.Weather.Picker.CustomColorHint'}}">{{localize "CALENDARIA.Common.Color"}}</label>
        <div class="form-fields">
          <color-picker name="customColor" value="{{customColor}}"></color-picker>
        </div>
      </div>

      {{#if hasFXMaster}}
        <div class="form-group">
          <label for="fxPreset"
            data-tooltip="{{localize 'CALENDARIA.Weather.Picker.FxPresetHint'}}">{{localize "CALENDARIA.WeatherEditor.FxPreset"}}</label>
          <div class="form-fields">
            <select id="fxPreset" name="fxPreset">
              {{#each fxPresetOptions}}
                <option value="{{this.value}}" {{#if this.selected}}selected{{/if}}>{{this.label}}</option>
              {{/each}}
            </select>
          </div>
        </div>
        <div class="form-group">
          <label for="fxDensity"
            data-tooltip="{{localize 'CALENDARIA.Weather.Picker.FxDensityHint'}}">{{localize "CALENDARIA.Weather.Picker.FxDensity"}}</label>
          <div class="form-fields">
            <select id="fxDensity" name="fxDensity">
              {{#each fxDensityOptions}}
                <option value="{{this.value}}" {{#if this.selected}}selected{{/if}}>{{this.label}}</option>
              {{/each}}
            </select>
          </div>
        </div>
        <div class="form-group">
          <label for="fxSpeed"
            data-tooltip="{{localize 'CALENDARIA.Weather.Picker.FxSpeedHint'}}">{{localize "CALENDARIA.Weather.Picker.FxSpeed"}}</label>
          <div class="form-fields">
            <select id="fxSpeed" name="fxSpeed">
              {{#each fxSpeedOptions}}
                <option value="{{this.value}}" {{#if this.selected}}selected{{/if}}>{{this.label}}</option>
              {{/each}}
            </select>
          </div>
        </div>
        <div class="form-group">
          <label for="fxColor"
            data-tooltip="{{localize 'CALENDARIA.Weather.Picker.FxColorHint'}}">{{localize "CALENDARIA.Weather.Picker.FxColor"}}</label>
          <div class="form-fields">
            <input type="text" id="fxColor" name="fxColor" value="{{fxColor}}" placeholder="#RRGGBB">
          </div>
        </div>
      {{/if}}

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

      <span class="category-header">{{localize "CALENDARIA.Common.Wind"}}</span>
      <div class="form-group">
        <label for="windSpeed"
          data-tooltip="{{localize 'CALENDARIA.Weather.Wind.SpeedHint'}}">{{localize "CALENDARIA.Weather.Wind.Speed"}}</label>
        <div class="form-fields">
          <select id="windSpeed" name="windSpeed">
            <option value="random" {{#if windSpeedRandom}}selected{{/if}}>{{localize "CALENDARIA.Common.Random"}}
            </option>
            {{#each windSpeedOptions}}
              <option value="{{this.value}}" {{#if this.selected}}selected{{/if}}>{{this.label}}</option>
            {{/each}}
          </select>
        </div>
      </div>
      <div class="form-group">
        <label
          data-tooltip="{{localize 'CALENDARIA.Weather.Wind.DirectionHint'}}">{{localize "CALENDARIA.Weather.Wind.Direction"}}</label>
        <div class="form-fields">
          <select name="windDirectionCompass">
            <option value="">{{localize "CALENDARIA.Common.Random"}}</option>
            {{#each compassDirections}}
              <option value="{{this.degrees}}" {{#if this.selected}}selected{{/if}}>{{this.label}}</option>
            {{/each}}
          </select>
        </div>
      </div>

      <span class="category-header">{{localize "CALENDARIA.Common.Precipitation"}}</span>
      <div class="form-group">
        <label for="precipType"
          data-tooltip="{{localize 'CALENDARIA.Weather.Precipitation.TypeHint'}}">{{localize "CALENDARIA.Common.Type"}}</label>
        <div class="form-fields">
          <select id="precipType" name="precipType">
            <option value="random" {{#if precipTypeRandom}}selected{{/if}}>{{localize "CALENDARIA.Common.Random"}}
            </option>
            {{#each precipitationTypes}}
              <option value="{{this.value}}" {{#if this.selected}}selected{{/if}}>{{this.label}}</option>
            {{/each}}
          </select>
        </div>
      </div>
      <div class="form-group">
        <label for="precipIntensity"
          data-tooltip="{{localize 'CALENDARIA.Weather.Precipitation.IntensityHint'}}">{{localize "CALENDARIA.Weather.Precipitation.Intensity"}}</label>
        <div class="form-fields">
          <input type="range" id="precipIntensity" name="precipIntensity" min="0" max="1" step="0.05"
            value="{{precipIntensity}}">
          <span class="precip-intensity-label">{{precipIntensityLabel}}</span>
        </div>
      </div>

      <label class="save-as-preset-toggle" data-tooltip="{{localize 'CALENDARIA.Weather.Picker.SaveAsPresetHint'}}">
        <input type="checkbox" name="saveAsPreset">
        {{localize "CALENDARIA.Weather.Picker.SaveAsPreset"}}
      </label>
    </div>
  </div>
</div>
