{% extends "base.html" %}

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

{% block content %}
<div class="space-y-8">
  <header 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>
  </header>

  {% if categories | length > 0 %}
  <div class="flex flex-wrap gap-2">
    {% for category in categories %}
    <a href="/category/{{ category.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">{{ category.name }}</a>
    {% endfor %}
  </div>
  {% endif %}

  {% if products | length > 0 %}
  <div class="grid grid-cols-2 gap-5 sm:grid-cols-3 lg: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 %}