{% extends "base.html" %}
{% block content %}
<h1>Weather</h1>

{% if error %}
<div class="toast error">{{ error }}</div>
{% endif %}

<form method="post">
  <div class="card">
    <div class="section-label">Location</div>
    <p class="hint" style="margin: -0.25rem 0 1rem;">Uses Open-Meteo &mdash; no API key needed.</p>
    <div class="field">
      <label for="city">City</label>
      <input type="text" id="city" name="city" placeholder="e.g. Berlin">
      {% if settings.city %}
      <p class="hint">Currently: {{ settings.city }} ({{ settings.latitude }}, {{ settings.longitude }})</p>
      {% endif %}
    </div>
  </div>

  <div class="card">
    <div class="section-label">Forecast</div>
    <div class="field">
      <label for="forecast_days">Days to show</label>
      <select id="forecast_days" name="forecast_days">
        <option value="3" {{ "selected" if settings.forecast_days == 3 }}>3 days</option>
        <option value="5" {{ "selected" if settings.forecast_days == 5 or not settings.forecast_days }}>5 days</option>
        <option value="7" {{ "selected" if settings.forecast_days == 7 }}>7 days</option>
      </select>
    </div>
    <div class="field">
      <label for="update_minutes">Update every (minutes)</label>
      <input type="number" id="update_minutes" name="update_minutes" min="1" value="{{ settings.update_minutes or 30 }}">
      <p class="hint">Weather itself only refreshes the panel when something actually changed, so a shorter interval here mostly just means fresher data, not more flashing.</p>
    </div>
    <div class="field">
      <label class="checkbox">
        <input type="checkbox" name="show_city" {{ "checked" if settings.show_city != False }}>
        City name
      </label>
      <label class="checkbox">
        <input type="checkbox" name="show_date" {{ "checked" if settings.show_date != False }}>
        Weekday + date
      </label>
      <label class="checkbox">
        <input type="checkbox" name="show_hourly_graph" {{ "checked" if settings.show_hourly_graph != False }}>
        Hourly temperature graph
      </label>
      <label class="checkbox">
        <input type="checkbox" name="show_feels_like" {{ "checked" if settings.show_feels_like != False }}>
        "Feels like" temperature
      </label>
      <label class="checkbox">
        <input type="checkbox" name="show_high_low" {{ "checked" if settings.show_high_low != False }}>
        Today's high/low
      </label>
      <label class="checkbox">
        <input type="checkbox" name="show_rain_chance" {{ "checked" if settings.show_rain_chance != False }}>
        Rain chance
      </label>
    </div>
  </div>

  <div class="card">
    <div class="section-label">Or enter coordinates manually</div>
    <p class="hint" style="margin: -0.25rem 0 1rem;">Leave the city field above empty to use these instead.</p>
    <div class="field">
      <label for="latitude">Latitude</label>
      <input type="text" id="latitude" name="latitude" value="{{ settings.latitude if settings.latitude is not none else '' }}" placeholder="e.g. 52.52">
    </div>
    <div class="field">
      <label for="longitude">Longitude</label>
      <input type="text" id="longitude" name="longitude" value="{{ settings.longitude if settings.longitude is not none else '' }}" placeholder="e.g. 13.40">
    </div>
  </div>

  <button type="submit">Save</button>
</form>
{% endblock %}