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

{% block title %}{{ t(key="admin-products", lang=lang | default(value='sk')) }}{% endblock title %}
{% block crumb %}{{ t(key="admin-products", 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-products", lang=lang | default(value='sk')) }}</h1>
    <p class="text-sm text-on-surface/70 dark:text-on-surface-dark/70">{{ t(key="admin-products-desc", lang=lang | default(value='sk')) }}</p>
  </div>
  {{ ui::button(label=t(key="new-product", lang=lang | default(value='sk')), href="/admin/catalog/products/new") }}
</div>

<div class="mt-6 {{ ui::table_wrap_cls() }}">
  {% if products | length > 0 %}
  <table class="{{ ui::table_cls() }}">
    <thead class="{{ ui::thead_cls() }}">
      <tr>
        {{ ui::th(label=t(key="product", lang=lang | default(value='sk'))) }}
        {{ ui::th(label=t(key="price", lang=lang | default(value='sk'))) }}
        {{ ui::th(label=t(key="stock", lang=lang | default(value='sk'))) }}
        {{ ui::th(label=t(key="status", lang=lang | default(value='sk'))) }}
        {{ ui::th(label=t(key="actions", lang=lang | default(value='sk')), align="text-right") }}
      </tr>
    </thead>
    <tbody class="{{ ui::tbody_cls() }}">
      {% for product in products %}
      <tr class="{{ ui::row_cls() }}">
        <td class="px-4 py-3">
          <div class="flex items-center gap-3">
            {% if product.image %}
            <img src="/images/{{ product.image }}" alt="" class="size-10 rounded-radius object-cover">
            {% else %}
            <div class="size-10 rounded-radius bg-surface-alt dark:bg-surface-dark-alt"></div>
            {% endif %}
            <div>
              <div class="font-medium text-on-surface-strong dark:text-on-surface-dark-strong">{{ product.name }}</div>
              {% if product.category_name %}<div class="text-xs text-on-surface/60 dark:text-on-surface-dark/60">{{ product.category_name }}</div>{% endif %}
            </div>
          </div>
        </td>
        <td class="px-4 py-3 tabular-nums">{{ product.price }} {{ product.currency }}</td>
        <td class="px-4 py-3 tabular-nums">{{ product.stock }}</td>
        <td class="px-4 py-3">
          {% if product.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">
            {{ ui::button(variant="outline-secondary", label=t(key="edit", lang=lang | default(value='sk')), href="/admin/catalog/products/" ~ product.id ~ "/edit", size="px-3 py-1.5 text-xs") }}
            {{ ui::button(variant="outline-secondary", label=t(key="view", lang=lang | default(value='sk')), href="/shop/" ~ product.slug, size="px-3 py-1.5 text-xs") }}
            <form method="post" action="/admin/catalog/products/{{ product.id }}/delete"
              onsubmit="return confirm('{{ t(key="confirm-delete", lang=lang | default(value='sk')) }}')">
              {{ ui::button(variant="outline-danger", label=t(key="delete", lang=lang | default(value='sk')), type="submit", size="px-3 py-1.5 text-xs") }}
            </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-products", lang=lang | default(value='sk')) }}</p>
    {{ ui::button(label=t(key="new-product", lang=lang | default(value='sk')), href="/admin/catalog/products/new") }}
  </div>
  {% endif %}
</div>
{% endblock content %}
