{% extends "base.html" %}

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

{% block content %}
<div class="space-y-8">
  <header class="space-y-2">
    <nav class="text-sm text-on-surface/60 dark:text-on-surface-dark/60">
      <a href="/shop" class="hover:text-primary dark:hover:text-primary-dark">{{ t(key="nav-shop", lang=lang | default(value='sk')) }}</a>
      {% for crumb in breadcrumbs %}
      <span class="px-1">/</span>
      <a href="/category/{{ crumb.slug }}" class="hover:text-primary dark:hover:text-primary-dark">{{ crumb.name }}</a>
      {% endfor %}
      <span class="px-1">/</span>
      <span>{{ category.name }}</span>
    </nav>
    <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>

  {% if products | length > 0 %}
  <div class="grid grid-cols-2 gap-5 sm:grid-cols-3 xl:grid-cols-4">
    {% for product in products %}
    {% include "shop/_card.html" %}
    {% endfor %}
  </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=lang | default(value='sk')) }}
  </div>
  {% endif %}
</div>
{% endblock content %}