53 lines
3.0 KiB
HTML
53 lines
3.0 KiB
HTML
{% 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 %}
|