{% extends "base.html" %}
{% block title %}{{_("Weather")}}{% endblock %}

{# {% block header %}
<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle"
          type="button"
          data-bs-toggle="dropdown"
          aria-expanded="false">
    {{provider or providers[0]}}
  </button>
  <ul class="dropdown-menu">
    {% for provider in providers %}
    <li><a class="dropdown-item"
         href="{{ url_for('get_weather_index').include_query_params(provider=provider) }}">{{provider}}</a></li>
    {% endfor %}
  </ul>
</div>
{% endblock %} #}

{% block content %}
<h1>{{_("Weather")}}</h1>
<form action=""
      method="get"
      class="mb-4">
  <div class="input-group mb-3">
    <input type="text"
           class="form-control"
           id="query"
           name="query"
           placeholder="{{_('Enter the city name')}}">
    <button class="btn btn-primary"
            type="submit">{{_("Search")}}</button>
  </div>
</form>
{% if locations %}
<ul id="locations"
    class="list-group mb-5">
  {% for location in locations %}
  <weather-location location="{{location.model_dump() | tojson | forceescape}}"></weather-location>
  {% endfor %}
</ul>
<hr>
{% endif %}
<ul id="storedLocations"
    class="list-group mb-5">
</ul>
<script>
  (function () {
    const params = new URLSearchParams(window.location.search);
    const searchQuery = params.get('query');
    if (searchQuery) {
      document.querySelector('#query').value = searchQuery;
    }

    document.addEventListener("DOMContentLoaded", (event) => {
      weatherLocationManager.loadLocations('#storedLocations');
    });
  })();
</script>
{% endblock %}