<div id="search-results"
     class="min-w-full w-full">
  {% if logged_in and query %}
    <button title="Afegeix un tema"
            class="border border-beige text-beige rounded
                   m-1 px-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>
      <i>{{ query }}</i>
    </button>
  {% endif %}
  <table class="text-left min-w-full w-full">
    <tr class="border-b border-beige">
      <td class="font-bold py-2 px-4">Nom</td>
      <td class="font-bold py-2 px-4">Enllaços</td>
      <td class="font-bold py-2 px-4">Cops tocat</td>
    </tr>
    {% for tema in temes %}
    <tr class="border-b border-beige">
      <td class="py-2 px-4">
        <a href="/tema/{{ tema.id }}">
          {{ tema.title }}
        </a>
      </td>
      <td class="py-2 px-4">
        {% include "fragments/temes/result_links.html" %}
      </td>
      <td class="py-2 px-4">
        {% if tema.stats is none %}
          -
        {% else %}
          {{ tema.stats.times_played }}
        {% endif %}
      </td>
    </tr>
    {% endfor %}
  </table>
  {% if prev_offset is not none or next_offset is not none %}
  <div class="py-2">
    {% if prev_offset is not none %}
      <button class="text-beige mx-2"
              hx-get="/api/temes/busca?query={{ query }}&offset={{ prev_offset }}"
              hx-target="#search-results"
              hx-swap="outerHTML">
        <i class="fa fa-chevron-left" aria-hidden="true"></i>
      </button>
    {% endif %}
    {% if next_offset is not none %}
      <button class="text-beige mx-2"
              hx-get="/api/temes/busca?query={{ query }}&offset={{ next_offset }}"
              hx-target="#search-results"
              hx-swap="outerHTML">
        <i class="fa fa-chevron-right" aria-hidden="true"></i>
      </button>
    {% endif %}
  </div>
  {% endif %}
</div>
