{% include "fragments/menu.html" %}
<div class="p-12 text-center flex flex-col items-center justify-center">
  <h3 class="text-3xl text-beige p-4">Temes</h3>
  <input id="query-input"
         type="text" name="query" value="{{ query }}"
         placeholder="Busca una tema..."
         class="rounded
                text-yellow-50 bg-brown
                border border-yellow-50
                p-2 m-2"
         hx-get="/api/temes/busca"
         hx-trigger="revealed, keyup delay:500ms changed"
         hx-target="#search-results"
         hx-swap="outerHTML">
  {% if logged_in %}
    <button title="Afegeix un tema"
            class="text-beige m-2"
            hx-post="/api/tema"
            hx-include="[name=query]"
            hx-vals="js:{title: document.getElementById('query-input').value}"
            >
      <i class="fa fa-plus" aria-hidden="true"></i>
      Afegeix un tema
    </button>
  {% endif %}
  <div id="search-results" class="flex-col"></div>
</div>