{% 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="bg-page py-16 sm:py-24">
        <div class="mx-auto max-w-2xl px-4 text-center sm:px-6 lg:px-8">
            <div class="border-accent/20 rounded-sm border bg-surface px-6 py-12 shadow-sm sm:px-10">
                <div class="border-accent mx-auto h-14 w-14 animate-spin rounded-full border-2 border-t-transparent"></div>

                <div class="text-accent mt-8 tracking-label uppercase">
                    {{ 'checkout_design.payment_pending_badge'|trans }}
                </div>
                <h1 class="text-foreground mt-3 font-serif text-3xl uppercase md:text-4xl">
                    {{ 'checkout_design.payment_pending_title'|trans }}
                </h1>
                <p class="text-foreground/75 mx-auto mt-4 max-w-xl text-sm leading-6 sm:text-base">
                    {{ 'checkout_design.payment_pending_notice'|trans }}
                </p>
                <p class="text-foreground/55 mt-6 text-sm">
                    {{ 'checkout_design.payment_pending_reference'|trans({ '%reference%': cart.token }) }}
                </p>
            </div>
        </div>
    </section>
{% endblock %}
