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

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

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

    {# Live search: htmx GETs /search as the customer types (debounced) and
       swaps only the results below. hx-push-url keeps the URL shareable; the
       spinner shows while a request is in flight. Degrades to a normal GET form
       submit when JS/htmx is unavailable. #}
    <form action="/search" method="get" role="search"
      class="relative max-w-md"
      hx-get="/search" hx-target="#shop-results" hx-swap="innerHTML"
      hx-trigger="input changed delay:300ms from:input[name='q'], submit"
      hx-push-url="true" hx-indicator="#search-spinner">
      <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=lang | default(value='sk')) }}"
        aria-label="{{ t(key='search-placeholder', lang=lang | default(value='sk')) }}"
        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>
    </form>
  </header>

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