{% extends "base.html" %}
{% import "macros/ui.html" as ui %}

{% block title %}{{ t(key="nav-shop", lang=lang | default(value='sk')) }}{% endblock title %}

{% block content %}
{% set L = lang | default(value='sk') %}
<div class="space-y-6">
  <header class="space-y-1">
    <h1 class="text-3xl font-bold text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="shop-title", lang=L) }}</h1>
    <p class="text-on-surface/70 dark:text-on-surface-dark/70">{{ t(key="shop-subtitle", lang=L) }}</p>
  </header>

  {# One form drives the whole listing. htmx re-runs /search and swaps only the
     results region; the toolbar keeps its own DOM state. Triggers: live (debounced)
     typing in the search box, immediate on any select/checkbox change, and submit
     (Enter / Apply) for the price band. Degrades to a plain GET form without JS. #}
  <form action="/search" method="get" role="search"
    hx-get="/search" hx-target="#shop-results" hx-swap="innerHTML"
    hx-push-url="true" hx-indicator="#search-spinner"
    hx-trigger="submit, change, keyup changed delay:350ms from:input[name='q']"
    class="space-y-3">

    <!-- search box -->
    <div class="relative max-w-xl">
      <span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-on-surface/50 dark:text-on-surface-dark/50">
        {{ ui::icon(name="search", size="size-5") }}
      </span>
      <input type="search" name="q" value="{{ query | default(value='') }}" autocomplete="off"
        placeholder="{{ t(key='search-placeholder', lang=L) }}"
        aria-label="{{ t(key='search-placeholder', lang=L) }}"
        class="w-full rounded-radius border border-outline bg-surface py-2 pl-10 pr-10 text-sm text-on-surface placeholder:text-on-surface/50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark dark:placeholder:text-on-surface-dark/50 dark:focus-visible:outline-primary-dark" />
      <span id="search-spinner" class="htmx-indicator pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3 text-on-surface/50 dark:text-on-surface-dark/50">
        <svg class="size-4 animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true">
          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
          <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 0 1 8-8V0C5.4 0 0 5.4 0 12h4Z"></path>
        </svg>
      </span>
    </div>

    <!-- filter toolbar -->
    <div class="flex flex-wrap items-end gap-3 rounded-radius border border-outline bg-surface-alt p-3 dark:border-outline-dark dark:bg-surface-dark-alt">
      <!-- category -->
      <label class="flex flex-col gap-1 text-xs font-medium text-on-surface/70 dark:text-on-surface-dark/70">
        {{ t(key="filter-category", lang=L) }}
        <select name="category"
          class="rounded-radius border border-outline bg-surface px-2 py-1.5 text-sm text-on-surface focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary dark:border-outline-dark dark:bg-surface-dark dark:text-on-surface-dark">
          <option value="all"{% if selected_category == "all" %} selected{% endif %}>{{ t(key="filter-all-categories", lang=L) }}</option>
          {% for g in category_groups %}
          <option value="{{ g.id }}"{% if selected_category_id == g.id %} selected{% endif %}>{{ g.name }} ({{ g.count }})</option>
          {% for ch in g.children %}
          <option value="{{ ch.id }}"{% if selected_category_id == ch.id %} selected{% endif %}>&nbsp;&nbsp;— {{ ch.name }} ({{ ch.count }})</option>
          {% endfor %}
          {% endfor %}
          {% if uncategorized_count > 0 %}
          <option value="none"{% if selected_category == "none" %} selected{% endif %}>{{ t(key="filter-uncategorized", lang=L) }} ({{ uncategorized_count }})</option>
          {% endif %}
        </select>
      </label>

      <!-- sort -->
      <label class="flex flex-col gap-1 text-xs font-medium text-on-surface/70 dark:text-on-surface-dark/70">
        {{ t(key="sort-label", lang=L) }}
        <select name="sort"
          class="rounded-radius border border-outline bg-surface px-2 py-1.5 text-sm text-on-surface focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary dark:border-outline-dark dark:bg-surface-dark dark:text-on-surface-dark">
          {% for opt in ["relevance", "newest", "price_asc", "price_desc", "name_asc", "name_desc"] %}
          <option value="{{ opt }}"{% if sort == opt %} selected{% endif %}>{{ t(key="sort-" ~ opt, lang=L) }}</option>
          {% endfor %}
        </select>
      </label>

      <!-- price band -->
      <label class="flex flex-col gap-1 text-xs font-medium text-on-surface/70 dark:text-on-surface-dark/70">
        {{ t(key="filter-price", lang=L) }}
        <span class="flex items-center gap-1">
          <input type="number" name="min_price" min="0" step="0.01" inputmode="decimal"
            value="{{ min_price | default(value='') }}" placeholder="{{ price_floor }}"
            aria-label="{{ t(key='filter-price-from', lang=L) }}"
            class="w-24 rounded-radius border border-outline bg-surface px-2 py-1.5 text-sm text-on-surface dark:border-outline-dark dark:bg-surface-dark dark:text-on-surface-dark" />
          <span class="text-on-surface/50 dark:text-on-surface-dark/50">–</span>
          <input type="number" name="max_price" min="0" step="0.01" inputmode="decimal"
            value="{{ max_price | default(value='') }}" placeholder="{{ price_ceil }}"
            aria-label="{{ t(key='filter-price-to', lang=L) }}"
            class="w-24 rounded-radius border border-outline bg-surface px-2 py-1.5 text-sm text-on-surface dark:border-outline-dark dark:bg-surface-dark dark:text-on-surface-dark" />
        </span>
      </label>

      <!-- in stock -->
      <label class="flex items-center gap-2 pb-1.5 text-sm text-on-surface dark:text-on-surface-dark">
        <input type="checkbox" name="in_stock" value="1"{% if in_stock %} checked{% endif %}
          class="size-4 rounded border-outline text-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary dark:border-outline-dark dark:text-primary-dark" />
        {{ t(key="filter-in-stock", lang=L) }}
      </label>

      <div class="ml-auto flex items-end gap-2">
        {{ ui::button(label=t(key="filter-apply", lang=L), type="submit", variant="secondary") }}
        <a href="/shop" hx-get="/search" hx-target="#shop-results" hx-push-url="true"
          class="self-end pb-1.5 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>
      </div>
    </div>
  </form>

  <div id="shop-results">
    {% include "shop/_results.html" %}
  </div>
</div>
{% endblock content %}