{# Results region: swapped in by htmx on each query/filter change and rendered
   server-side on first load. Holds the result summary, the product grid and
   pagination. #}
{% set L = lang | default(value='sk') %}
<div class="space-y-4">
  <div class="flex flex-wrap items-center justify-between gap-2">
    <p class="text-sm text-on-surface/70 dark:text-on-surface-dark/70" aria-live="polite">
      {{ t(key="results-count", lang=L, count=total) }}{% if query and query != "" %} · “{{ query }}”{% endif %}
    </p>
    {% if query_base and query_base != "" %}
    <a href="/shop" hx-get="/search" hx-target="#shop-results" hx-push-url="true"
      class="text-sm font-medium text-on-surface/70 underline-offset-2 transition hover:text-primary hover:underline dark:text-on-surface-dark/70 dark:hover:text-primary-dark">
      {{ t(key="filter-clear", lang=L) }}
    </a>
    {% endif %}
  </div>

  {% if products | length > 0 %}
  {% include "shop/_product_grid.html" %}

  {% if pages > 1 %}
  <nav class="flex items-center justify-center gap-2 pt-2" aria-label="{{ t(key='pagination', lang=L) }}">
    {% if has_prev %}
    <button type="button"
      hx-get="/search?{% if query_base %}{{ query_base }}&{% endif %}page={{ prev_page }}"
      hx-target="#shop-results" hx-swap="innerHTML" hx-push-url="true"
      class="rounded-radius border border-outline px-3 py-1.5 text-sm font-medium text-on-surface transition hover:bg-primary/5 hover:text-primary dark:border-outline-dark dark:text-on-surface-dark dark:hover:text-primary-dark">
      {{ t(key="prev", lang=L) }}
    </button>
    {% endif %}
    <span class="px-2 text-sm text-on-surface/70 dark:text-on-surface-dark/70">
      {{ t(key="page-of", lang=L, page=page, pages=pages) }}
    </span>
    {% if has_next %}
    <button type="button"
      hx-get="/search?{% if query_base %}{{ query_base }}&{% endif %}page={{ next_page }}"
      hx-target="#shop-results" hx-swap="innerHTML" hx-push-url="true"
      class="rounded-radius border border-outline px-3 py-1.5 text-sm font-medium text-on-surface transition hover:bg-primary/5 hover:text-primary dark:border-outline-dark dark:text-on-surface-dark dark:hover:text-primary-dark">
      {{ t(key="next", lang=L) }}
    </button>
    {% endif %}
  </nav>
  {% endif %}

  {% elif query and query != "" %}
  <div class="rounded-radius border border-outline px-6 py-16 text-center text-on-surface/70 dark:border-outline-dark dark:text-on-surface-dark/70">
    {{ t(key="search-empty", lang=L) }} <span class="font-medium text-on-surface-strong dark:text-on-surface-dark-strong">{{ query }}</span>
  </div>
  {% else %}
  <div class="rounded-radius border border-outline px-6 py-16 text-center text-on-surface/70 dark:border-outline-dark dark:text-on-surface-dark/70">
    {{ t(key="shop-empty", lang=L) }}
  </div>
  {% endif %}
</div>