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

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

{% block content %}
<div class="flex flex-wrap items-end justify-between gap-3">
  <div>
    <h1 class="text-2xl font-bold text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="admin-categories", lang=lang | default(value='sk')) }}</h1>
    <p class="text-sm text-on-surface/70 dark:text-on-surface-dark/70">{{ t(key="admin-categories-desc", lang=lang | default(value='sk')) }}</p>
  </div>
  {{ ui::button(label=t(key="new-category", lang=lang | default(value='sk')), href="/admin/catalog/categories/new") }}
</div>

<div class="mt-6 overflow-hidden rounded-radius border border-outline dark:border-outline-dark">
  {% if categories | length > 0 %}
  <table class="w-full text-left text-sm">
    <thead class="border-b border-outline bg-surface-alt text-xs uppercase tracking-wide text-on-surface/70 dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark/70">
      <tr>
        <th class="px-4 py-3 font-semibold">{{ t(key="name", lang=lang | default(value='sk')) }}</th>
        <th class="px-4 py-3 font-semibold">{{ t(key="admin-products", lang=lang | default(value='sk')) }}</th>
        <th class="px-4 py-3 font-semibold">{{ t(key="status", lang=lang | default(value='sk')) }}</th>
        <th class="px-4 py-3 text-right font-semibold">{{ t(key="actions", lang=lang | default(value='sk')) }}</th>
      </tr>
    </thead>
    <tbody class="divide-y divide-outline dark:divide-outline-dark">
      {% for row in categories %}
      <tr class="hover:bg-surface-alt dark:hover:bg-surface-dark-alt">
        <td class="px-4 py-3 font-medium text-on-surface-strong dark:text-on-surface-dark-strong">
          <span style="padding-left: {{ row.depth * 20 }}px" class="inline-flex items-center gap-1.5">
            {% if row.depth > 0 %}<span class="text-on-surface/40 dark:text-on-surface-dark/40">↳</span>{% endif %}
            {{ row.category.name }}
          </span>
        </td>
        <td class="px-4 py-3 tabular-nums">{{ row.product_count }}</td>
        <td class="px-4 py-3">
          {% if row.category.published %}
          {{ ui::badge(label=t(key="published", lang=lang | default(value='sk')), variant="success") }}
          {% else %}
          {{ ui::badge(label=t(key="draft", lang=lang | default(value='sk')), variant="neutral") }}
          {% endif %}
        </td>
        <td class="px-4 py-3">
          <div class="flex flex-wrap justify-end gap-2">
            <a href="/admin/catalog/categories/{{ row.category.id }}/edit"
              class="inline-flex items-center rounded-radius border border-outline px-3 py-1.5 text-xs font-medium text-on-surface transition hover:bg-surface-alt dark:border-outline-dark dark:text-on-surface-dark dark:hover:bg-surface-dark-alt">{{ t(key="edit", lang=lang | default(value='sk')) }}</a>
            <form method="post" action="/admin/catalog/categories/{{ row.category.id }}/delete"
              onsubmit="return confirm('{{ t(key="confirm-delete", lang=lang | default(value='sk')) }}')">
              <button type="submit" class="inline-flex items-center rounded-radius border border-outline px-3 py-1.5 text-xs font-medium text-danger transition hover:bg-danger/10 dark:border-outline-dark">{{ t(key="delete", lang=lang | default(value='sk')) }}</button>
            </form>
          </div>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  {% else %}
  <div class="flex flex-col items-center gap-3 px-4 py-16 text-center">
    <p class="text-on-surface/70 dark:text-on-surface-dark/70">{{ t(key="admin-no-categories", lang=lang | default(value='sk')) }}</p>
    {{ ui::button(label=t(key="new-category", lang=lang | default(value='sk')), href="/admin/catalog/categories/new") }}
  </div>
  {% endif %}
</div>
{% endblock content %}