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

{% block page_title %}Order Confirmed{% endblock %}

{% block head %}
<link rel="stylesheet" href="/plugins/checkout/assets/css/confirmation.ui.css">
{% if is_pending %}
<meta http-equiv="refresh" content="3">
{% endif %}
{% endblock %}

{% block content %}
<main class="mx-auto my-8 w-full max-w-3xl min-w-0 px-4 sm:my-12 sm:px-6" aria-labelledby="order-confirmation-title">
    <div class="rounded-3xl border border-divider bg-surface p-5 text-center shadow-lg sm:p-10">
        {% if is_pending %}
        <div class="mx-auto mb-5 flex size-16 items-center justify-center rounded-full bg-warning/10 text-4xl" aria-hidden="true">⏳</div>
        {% else %}
        <div class="mx-auto mb-5 flex size-16 items-center justify-center rounded-full bg-success/10 text-4xl" aria-hidden="true">🎉</div>
        {% endif %}
        {% if is_pending %}
        <h1 id="order-confirmation-title" class="mb-3 text-2xl font-bold tracking-tight text-foreground sm:text-3xl">Processing your order</h1>
        <p class="mx-auto mb-6 max-w-xl leading-7 text-muted" role="status">We are finalizing order <strong class="text-foreground">{{ order.order_number }}</strong>. This page will update when confirmation is complete.</p>
        <div class="mx-auto mb-6 size-10 animate-spin rounded-full border-4 border-divider border-t-brand" aria-hidden="true"></div>
        {% else %}
        <h1 id="order-confirmation-title" class="mb-3 text-2xl font-bold tracking-tight text-foreground sm:text-3xl">Order confirmed</h1>
        <p class="mx-auto mb-7 max-w-xl leading-7 text-muted">Thank you for your order. Your order number is <strong class="text-foreground">{{ order.order_number }}</strong>.</p>
        {% endif %}
        
        {% if not is_pending %}
        <section class="mb-7 rounded-2xl border border-divider bg-canvas p-4 text-left sm:p-6" aria-label="Order details">
            <div class="mb-3 flex flex-wrap justify-between gap-2 border-b border-divider pb-3 text-sm sm:text-base">
                <span class="text-muted">Date</span>
                <span class="font-semibold text-foreground">{{ order.created_at | date_in_tz(timezone=settings.timezone) }}</span>
            </div>
            
            {% if order.delivery_date %}
            <div class="mb-3 border-b border-divider pb-3">
                <div class="mb-2 flex flex-wrap justify-between gap-2 text-sm sm:text-base">
                    <span class="text-muted">Delivery date</span>
                    <span class="font-semibold text-foreground">{{ order.delivery_date | date_in_tz(timezone=settings.timezone, format="%d %b %Y") }}</span>
                </div>
                {% if delivery_slot %}
                <div class="flex flex-wrap justify-between gap-2 text-sm sm:text-base">
                    <span class="text-muted">Delivery slot</span>
                    <span class="font-semibold text-foreground">{{ delivery_slot.name }} ({{ delivery_slot.start_time }} - {{ delivery_slot.end_time }})</span>
                </div>
                {% endif %}
            </div>
            {% endif %}

            <div class="mt-4">
                {{ financials::financial_summary(order=order, currency_symbol=currency_symbol | default(value='$')) }}
            </div>
        </section>

        <section class="mb-8 text-left" aria-labelledby="order-items-title">
            <h2 id="order-items-title" class="mb-4 border-b border-divider pb-3 text-lg font-bold text-foreground">Items in this order</h2>
            <div class="divide-y divide-divider">
                {% if line_items and line_items | length > 0 %}
                {% for item in line_items %}
                <div class="flex min-w-0 justify-between gap-4 py-4 text-left">
                    <div class="min-w-0">
                        <div class="break-words font-semibold text-foreground">{{ item.product_name | default(value="Product") }}</div>
                        {% if item.variant_label %}<div class="mt-1 text-sm text-muted">{{ item.variant_label }}</div>{% endif %}
                        <div class="mt-1 text-sm text-muted">
                            {{ item.quantity }} × {{ currency_symbol }}{{ item.unit_price | price }}
                        </div>
                    </div>
                    <div class="shrink-0 font-bold text-foreground">
                        {{ currency_symbol }}{{ item.subtotal | price }}
                    </div>
                </div>
                {% endfor %}
                {% else %}
                <p class="py-4 text-sm text-muted">Order items are not available right now.</p>
                {% endif %}
            </div>
        </section>
        {% endif %}
        
        <a href="/" class="checkout-confirmation__button">Continue shopping</a>
    </div>
</main>
{% endblock %}