{% extends "base.html" %}
{% import "orders/user_status_macros.html" as order_status_macros %}
{% import "macros/empty_state.html" as empty %}

{% block page_title %}My Orders{% endblock %}

{% block content %}
<main class="mx-auto w-full max-w-5xl px-4 py-6 sm:px-6 lg:py-10">
    <section class="overflow-hidden rounded-2xl border border-divider bg-surface shadow-sm" aria-labelledby="my-orders-title">
        <header class="border-b border-divider px-5 py-6 sm:px-7">
            <h1 id="my-orders-title" class="text-2xl font-semibold text-foreground">My orders</h1>
            <p class="mt-1 text-sm text-muted">Your recent orders from the last 30 days.</p>
        </header>

        {% if orders | length > 0 %}
        <ol class="list-none divide-y divide-divider p-3 sm:p-4" aria-label="Orders placed in the last 30 days">
            {% for order in orders %}
            {% set order_status = order.status | default(value="pending") | lower %}
            <li class="block rounded-xl p-3 sm:grid sm:grid-cols-[minmax(8rem,1.2fr)_minmax(8rem,1fr)_minmax(7rem,.8fr)_minmax(8rem,1fr)_auto] sm:items-center sm:gap-4 sm:px-4 sm:py-4">
                <dl class="col-span-3 grid min-w-0 grid-cols-2 gap-x-4 gap-y-3 sm:contents">
                    <div class="min-w-0">
                        <dt class="text-xs font-medium uppercase tracking-wide text-muted sm:sr-only">Order number</dt>
                        <dd class="mt-1 truncate font-semibold text-foreground sm:mt-0">
                            <a class="rounded-sm  focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand" href="/plugins/orders/my-order/{{ order.order_number }}">#{{ order.order_number }}</a>
                        </dd>
                    </div>
                    <div class="min-w-0">
                        <dt class="text-xs font-medium uppercase tracking-wide text-muted sm:sr-only">Date</dt>
                        <dd class="mt-1 text-sm text-muted sm:mt-0">
                            <time>
                                <span data-format="relative-date" data-value="{{ order.created_at }}">{{ order.created_at | date_in_tz(timezone=settings.timezone, format='%d %b, %Y') }}</span>
                            </time>
                        </dd>
                    </div>
                    <div class="min-w-0">
                        <dt class="text-xs font-medium uppercase tracking-wide text-muted sm:sr-only">Total</dt>
                        <dd class="mt-1 font-medium text-foreground sm:mt-0">{{ currency_symbol }}{{ order.total | price }}</dd>
                    </div>
                    <div class="min-w-0">
                        <dt class="text-xs font-medium uppercase tracking-wide text-muted sm:sr-only">Status</dt>
                        <dd class="mt-1 sm:mt-0">
                            <span class="blocks-status-pill {% if order_status == 'delivered' %}is-success{% elif order_status == 'cancelled' %}is-danger{% elif order_status == 'processing' or order_status == 'shipped' %}is-info{% else %}is-neutral{% endif %}">{{ order_status_macros::order_status_label(status=order_status) }}</span>
                        </dd>
                    </div>
                </dl>
                <div class="col-span-2 mt-4 sm:col-span-1 sm:mt-0">
                    <a href="/plugins/orders/my-order/{{ order.order_number }}" class="blocks-button blocks-button-secondary inline-flex min-h-11 w-full items-center justify-center sm:w-auto">View details</a>
                </div>
            </li>
            {% endfor %}
        </ol>
        {% else %}
        <div class="px-5 py-10 sm:px-7">
            {{ empty::empty_state(icon="fas fa-shopping-bag", title="No orders yet", description="Your orders will appear here after you place one.", action_label="Start shopping", action_href="/") }}
        </div>
        {% endif %}
    </section>
</main>
{% endblock %}