<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 %}
  <hr class="h-px mt-1 mb-3 bg-beige border-0">

  <div class="mx-4 flex flex-col">
    {% include "fragments/temes/search_params/order_by.html" %}
    {% include "fragments/temes/search_params/filter.html" %}
  </div>

  <hr class="h-px mt-3 mb-3 bg-beige border-0">
  <ul class="min-w-full w-full">
    {% for tema in temes %}
      {% include "fragments/temes/result.html" %}
    {% endfor %}
  </ul>
  {% if prev_offset is not none or next_offset is not none %}
  <div class="py-2">
    {% if prev_offset is not none %}
      {% set hx_vars = build_hx_vars({"properties": properties_str, "offset": prev_offset}, order_params_dict) %}
      <button class="text-beige mx-2"
              hx-get="/api/temes/busca"
              hx-include="[name=query]"
              hx-vars="{{ hx_vars }}"
              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 %}
      {% set hx_vars = build_hx_vars({"properties": properties_str, "offset": next_offset}, order_params_dict) %}
      <button class="text-beige mx-2"
              hx-get="/api/temes/busca"
              hx-include="[name=query]"
              hx-vars="{{ hx_vars }}"
              hx-target="#search-results"
              hx-swap="outerHTML">
        <i class="fa fa-chevron-right" aria-hidden="true"></i>
      </button>
    {% endif %}
  </div>
  {% endif %}
</div>
