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

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

{% block content %}
<h1 class="text-2xl font-bold text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="admin-orders", lang=lang | default(value='sk')) }}</h1>

<div class="mt-6 {{ ui::table_wrap_cls() }}">
  {% if orders | length > 0 %}
  <table class="{{ ui::table_cls() }}">
    <thead class="{{ ui::thead_cls() }}">
      <tr>
        {{ ui::th(label=t(key="order-number", lang=lang | default(value='sk'))) }}
        {{ ui::th(label=t(key="order-customer", lang=lang | default(value='sk'))) }}
        {{ ui::th(label=t(key="order-status", lang=lang | default(value='sk'))) }}
        {{ ui::th(label=t(key="order-total", lang=lang | default(value='sk')), align="text-right") }}
        {{ ui::th(label="") }}
      </tr>
    </thead>
    <tbody class="{{ ui::tbody_cls() }}">
      {% for order in orders %}
      <tr class="{{ ui::row_cls() }}">
        <td class="px-4 py-3 font-mono font-medium text-on-surface-strong dark:text-on-surface-dark-strong">{{ order.order_number }}</td>
        <td class="px-4 py-3">{{ order.email }}</td>
        <td class="px-4 py-3">
          {{ ui::badge(label=t(key="order-status-" ~ order.status, lang=lang | default(value='sk')), variant="neutral") }}
        </td>
        <td class="px-4 py-3 text-right tabular-nums">{{ order.total }} {{ order.currency }}</td>
        <td class="px-4 py-3 text-right">
          {{ ui::button(variant="outline-secondary", label=t(key="view", lang=lang | default(value='sk')), href="/admin/orders/" ~ order.id, size="px-3 py-1.5 text-xs") }}
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  {% else %}
  <div class="px-4 py-16 text-center text-on-surface/70 dark:text-on-surface-dark/70">{{ t(key="admin-no-orders", lang=lang | default(value='sk')) }}</div>
  {% endif %}
</div>
{% endblock content %}