{% extends 'layout/checkout.html.twig' %}

{% block title %}{{ 'checkout_design.payment_pending_title'|trans }}{% endblock %}

{% block meta %}
    {% set payment_pending_parameters = { cartId: cart.id, startedAt: started_at } %}
    {% if stripe_session_id %}
        {% set payment_pending_parameters = payment_pending_parameters|merge({ stripeSessionId: stripe_session_id }) %}
    {% endif %}
    <meta http-equiv="refresh" content="3;url={{ path('shop_checkout_payment_pending', payment_pending_parameters) }}">
    <meta name="robots" content="noindex,nofollow">
{% endblock meta %}

{% block main %}
    <section class="relative flex min-h-screen items-center overflow-hidden bg-background py-16 sm:py-24">
        <div class="pointer-events-none absolute inset-x-0 top-0 h-[28rem] bg-[radial-gradient(circle_at_top,rgba(173,156,118,0.14),transparent_62%)]"></div>

        <div class="relative z-10 mx-auto w-full max-w-3xl px-4 text-center sm:px-6">
            <div class="border border-primary/10 bg-surface-container-low p-5 shadow-[0_20px_60px_rgba(51,38,28,0.06)] md:p-7">
                <div class="border border-primary/8 bg-white/70 px-6 py-10 sm:px-10 sm:py-14">
                    <div class="mx-auto h-14 w-14 animate-spin rounded-full border-2 border-primary/15 border-t-secondary" aria-hidden="true"></div>

                    <div class="mt-8 font-label text-[11px] font-semibold uppercase tracking-[0.22em] text-secondary">
                        {{ 'checkout_design.payment_pending_badge'|trans }}
                    </div>
                    <h1 class="mt-4 font-display text-[34px] leading-[1.02] font-semibold [font-optical-sizing:auto] text-primary md:text-[46px]">
                        {{ 'checkout_design.payment_pending_title'|trans }}
                    </h1>
                    <p class="mx-auto mt-4 max-w-xl text-[15px] leading-7 text-primary/72">
                        {{ 'checkout_design.payment_pending_notice'|trans }}
                    </p>
                    <p class="mt-6 font-label text-[10px] font-semibold uppercase tracking-[0.16em] text-primary/55">
                        {{ 'checkout_design.payment_pending_reference'|trans({ '%reference%': cart.token }) }}
                    </p>
                </div>
            </div>
        </div>
    </section>
{% endblock %}
