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

{% block title %}{{ category.name }}{% endblock title %}

{% block breadcrumbs %}
{% set L = lang | default(value='sk') %}
<nav aria-label="breadcrumb" class="mb-5 text-sm">
  <ol class="flex flex-wrap items-center gap-1.5 text-on-surface/60 dark:text-on-surface-dark/60">
    {{ ui::crumb(label=t(key="nav-home", lang=L), href="/") }}
    {{ ui::crumb(label=t(key="nav-shop", lang=L), href="/shop") }}
    {% for crumb in breadcrumbs %}
    {{ ui::crumb(label=crumb.name, href="/category/" ~ crumb.slug) }}
    {% endfor %}
    {{ ui::crumb_current(label=category.name) }}
  </ol>
</nav>
{% endblock breadcrumbs %}

{% block content %}
{% set L = lang | default(value='sk') %}
<div class="space-y-6">
  <header class="space-y-2">
    <h1 class="text-3xl font-bold text-on-surface-strong dark:text-on-surface-dark-strong">{{ category.name }}</h1>
    {% if category.description %}<p class="text-on-surface/70 dark:text-on-surface-dark/70">{{ category.description }}</p>{% endif %}

    {% if children | length > 0 %}
    <div class="flex flex-wrap gap-2 pt-1">
      {% for child in children %}
      <a href="/category/{{ child.slug }}"
        class="rounded-full border border-outline px-3 py-1 text-sm font-medium text-on-surface transition hover:border-primary hover:text-primary dark:border-outline-dark dark:text-on-surface-dark dark:hover:border-primary-dark dark:hover:text-primary-dark">{{ child.name }}</a>
      {% endfor %}
    </div>
    {% endif %}
  </header>

  {# Same search + filters as the shop, with this category preselected. #}
  {% include "shop/_search.html" %}
</div>
{% endblock content %}