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

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

{# status → badge variant #}
{% macro status_badge(status) %}
{% if status == "delivered" %}{{ ui::badge(label=t(key="order-status-" ~ status, lang=lang | default(value='sk')), variant="success") }}
{% elif status == "shipped" %}{{ ui::badge(label=t(key="order-status-" ~ status, lang=lang | default(value='sk')), variant="primary") }}
{% elif status == "paid" %}{{ ui::badge(label=t(key="order-status-" ~ status, lang=lang | default(value='sk')), variant="info") }}
{% elif status == "cancelled" %}{{ ui::badge(label=t(key="order-status-" ~ status, lang=lang | default(value='sk')), variant="danger") }}
{% else %}{{ ui::badge(label=t(key="order-status-" ~ status, lang=lang | default(value='sk')), variant="warning") }}
{% endif %}
{% endmacro status_badge %}

{% macro order_row(order) %}
<a href="/account/orders/{{ order.order_number }}"
  class="flex flex-wrap items-center justify-between gap-3 rounded-radius border border-outline bg-surface p-4 transition hover:border-primary hover:bg-primary/5 dark:border-outline-dark dark:bg-surface-dark-alt dark:hover:border-primary-dark">
  <div class="min-w-0">
    <p class="font-mono text-sm font-semibold text-on-surface-strong dark:text-on-surface-dark-strong">{{ order.order_number }}</p>
    <p class="text-xs text-on-surface/60 dark:text-on-surface-dark/60">{{ order.created_at | truncate(length=10, end="") }}</p>
  </div>
  <div class="flex items-center gap-4">
    {{ self::status_badge(status=order.status) }}
    <span class="tabular-nums text-sm font-medium text-on-surface-strong dark:text-on-surface-dark-strong">{{ order.total }} {{ order.currency }}</span>
  </div>
</a>
{% endmacro order_row %}

{% block content %}
<div class="mx-auto max-w-3xl space-y-8">
  <h1 class="text-3xl font-bold text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="account-orders", lang=lang | default(value='sk')) }}</h1>

  {% if active_orders | length == 0 and past_orders | length == 0 %}
  <p class="rounded-radius border border-outline bg-surface p-6 text-sm text-on-surface/70 dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark/70">{{ t(key="orders-empty", lang=lang | default(value='sk')) }}</p>
  {% endif %}

  {% if active_orders | length > 0 %}
  <section class="space-y-3">
    <h2 class="text-lg font-semibold text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="orders-active", lang=lang | default(value='sk')) }}</h2>
    {% for order in active_orders %}{{ self::order_row(order=order) }}{% endfor %}
  </section>
  {% endif %}

  {% if past_orders | length > 0 %}
  <section class="space-y-3">
    <h2 class="text-lg font-semibold text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="orders-past", lang=lang | default(value='sk')) }}</h2>
    {% for order in past_orders %}{{ self::order_row(order=order) }}{% endfor %}
  </section>
  {% endif %}
</div>
{% endblock content %}