{% extends "base.html" %}
{% block title %}{{_("Weather")}}{% 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')}}">
    <input type="hidden"
           class="form-control"
           id="provider"
           name="provider"
           value="{{provider or providers[0]}}">
    <button id="providerBtn"
            class="btn btn-secondary dropdown-toggle"
            type="text"
            data-bs-toggle="dropdown"
            aria-expanded="false">{{provider or providers[0]}}</button>
    <ul class="dropdown-menu dropdown-menu-end">
      {% for provider in providers %}
      <li>
        <a class="dropdown-item"
           onclick="provider.value='{{provider}}'; providerBtn.innerText='{{provider}}'">{{provider}}</a>
      </li>
      {% endfor %}
    </ul>
    <button class="btn btn-primary"
            type="submit">{{_("Search")}}</button>
  </div>
</form>
{% if locations %}
<div class="mb-4">
  <weather-location-list value="{{locations | tojson | forceescape}}"
                         onclick="weatherLocationManager.store(element)"
                         onadd="weatherLocationManager.add(element)"></weather-location-list>
  <hr>
</div>
{% endif %}
<div class="mb-4">
  <h3>{{_("Stored locations")}}</h3>
  <weather-location-list id="storedLocations"
                         onremove="weatherLocationManager.remove(element)"></weather-location-list>
</div>
<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.load();
    });
  })();
</script>
{% endblock %}