46 lines
2.6 KiB
HTML
46 lines
2.6 KiB
HTML
{% 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 %}
|