<h2 class="dialog-title">Weather widget</h2>

<section class="card">
  <h2 class="card-title">Display</h2>
  <form id="weather-config-form">
    <label>Mode
      <select id="weather_mode">
        <option value="current" {% if weather_cfg.mode == "current" %}selected{% endif %}>Current conditions</option>
        <option value="hourly" {% if weather_cfg.mode == "hourly" %}selected{% endif %}>Hourly forecast</option>
        <option value="daily" {% if weather_cfg.mode == "daily" %}selected{% endif %}>Multi-day forecast</option>
        <option value="multi_city" {% if weather_cfg.mode == "multi_city" %}selected{% endif %}>Multiple cities</option>
      </select>
    </label>
    <label>Weather source
      <select id="weather_provider">
        {% for value, label in weather_provider_labels.items() %}
          <option value="{{ value }}" {% if weather_cfg.provider == value %}selected{% endif %}>{{ label }}</option>
        {% endfor %}
      </select>
    </label>
    <p class="sub" style="margin-top: 4px;">National Weather Service only covers US locations.</p>
    <label>Units
      <select id="weather_units">
        <option value="fahrenheit" {% if weather_cfg.units == "fahrenheit" %}selected{% endif %}>Fahrenheit</option>
        <option value="celsius" {% if weather_cfg.units == "celsius" %}selected{% endif %}>Celsius</option>
      </select>
    </label>
    <div id="weather-hourly-interval-row">
      <label>Hours between ticks
        <select id="weather_hourly_interval_hours">
          {% for hours in (3, 4, 6, 12) %}
            <option value="{{ hours }}" {% if weather_cfg.hourly_interval_hours == hours %}selected{% endif %}>{{ hours }}</option>
          {% endfor %}
        </select>
      </label>
    </div>
    <div id="weather-daily-days-row">
      <label>Days to show
        <input type="number" id="weather_daily_days" min="1" max="14" value="{{ weather_cfg.daily_days }}">
      </label>
    </div>
    <button type="submit">Save</button>
  </form>
</section>

<section class="card" id="weather-location-section" style="margin-top: 20px;">
  <h2 class="card-title">Location</h2>
  <p class="sub" id="weather-location-current">
    {% if weather_cfg.city_label %}Currently: {{ weather_cfg.city_label }}{% else %}No location set yet.{% endif %}
  </p>
  <div class="checkbox-row" style="flex-wrap: wrap;">
    <input type="text" id="weather-location-input" placeholder="e.g. Portland, OR" style="margin-top: 0; flex: 1 1 160px;">
    <button type="button" class="btn-inline" id="weather-location-set">Set</button>
    <button type="button" class="btn-inline secondary" id="weather-location-clear">Clear</button>
  </div>
</section>

<section class="card" id="weather-cities-section" style="margin-top: 20px;">
  <h2 class="card-title">Cities</h2>
  <ul class="calendar-user-list" id="weather-widget-city-list">
    {% for c in weather_cfg.cities or [] %}
      <li class="checkbox-row" style="justify-content: space-between; margin-top: 6px;">
        <span>{{ c.label }}</span>
        <button type="button" class="btn-inline secondary weather-widget-city-remove" data-label="{{ c.label }}">Remove</button>
      </li>
    {% else %}
      <li class="sub" id="weather-widget-city-empty">No cities added yet.</li>
    {% endfor %}
  </ul>
  <div class="checkbox-row" style="margin-top: 10px;">
    <input type="text" id="weather-widget-city-input" placeholder="e.g. Portland, OR" style="margin-top: 0; flex: 1;">
    <button type="button" class="btn-inline" id="weather-widget-city-add">Add</button>
  </div>
</section>

<section class="card" style="margin-top: 20px;">
  <h2 class="card-title">Preview</h2>
  <p class="sub">How this widget currently renders.</p>
  <img class="preview-img" id="weather-preview" alt="Weather preview">
  <button type="button" class="secondary" id="weather-preview-refresh">Refresh now</button>
</section>
