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

{% block content %}
<h1>{{_("TV program")}}</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 channel 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 channels %}
<ul id="channels"
    class="list-group mb-5">
  {% for channel in channels %}
  <schedule-channel channel="{{channel.model_dump() | tojson | forceescape}}"></schedule-channel>
  {% endfor %}
</ul>
<hr>
{% endif %}
<ul id="storedChannels"
    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) => {
      scheduleChannelManager.loadChannels('#storedChannels');
    });
  })();
</script>
{% endblock %}