{% 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 %}
<div class="mb-4">
  <schedule-channel-list value="{{channels | tojson | forceescape}}"
                         onclick="scheduleChannelManager.store(element)"
                         onadd="scheduleChannelManager.add(element)"></schedule-channel-list>
  <hr>
</div>
{% endif %}
<div class="mb-4">
  <h3>Stored channels</h3>
  <schedule-channel-list id="storedChannels"
                         onremove="scheduleChannelManager.remove(element)"></schedule-channel-list>
</div>
<div class="mb-4">
  <h3>Channel groups</h3>
  <ul class="list-group">
    {% for group in groups %}
    <schedule-channel-group value="{{group | tojson | forceescape}}"></schedule-channel-group>
    {% endfor %}
  </ul>
</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) => {
      scheduleChannelManager.load();
    });
  })();
</script>
{% endblock %}