{% extends 'layout/checkout.html.twig' %}
{% block title %}{{ 'checkout_design.payment_unconfirmed_title'|trans }}{% endblock %}

{% block meta %}
    <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="text-accent tracking-label uppercase">
                    {{ 'checkout_design.payment_unconfirmed_badge'|trans }}
                </div>
                <h1 class="text-foreground mt-3 font-serif text-3xl uppercase md:text-4xl">
                    {{ 'checkout_design.payment_unconfirmed_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_unconfirmed_notice'|trans }}
                </p>
                <p class="text-foreground/55 mt-6 text-sm">
                    {{ 'checkout_design.payment_pending_reference'|trans({ '%reference%': cart.token }) }}
                </p>
                <div class="mt-8">
                    {% if contact_url %}
                        <a href="{{ contact_url }}" class="border-foreground bg-foreground hover:bg-foreground/90 inline-flex items-center justify-center border px-5 py-3 text-sm font-semibold text-on-foreground uppercase transition">
                            {{ 'checkout_design.payment_unconfirmed_contact_button'|trans }}
                        </a>
                    {% elseif contact_email %}
                        <a href="mailto:{{ contact_email }}?subject={{ 'checkout_design.payment_unconfirmed_email_subject'|trans({ '%reference%': cart.token })|url_encode }}" class="border-foreground bg-foreground hover:bg-foreground/90 inline-flex items-center justify-center border px-5 py-3 text-sm font-semibold text-on-foreground uppercase transition">
                            {{ contact_email }}
                        </a>
                    {% else %}
                        <a href="{{ path('shop') }}" class="border-foreground bg-foreground hover:bg-foreground/90 inline-flex items-center justify-center border px-5 py-3 text-sm font-semibold text-on-foreground uppercase transition">
                            {{ 'checkout_design.back_shop'|trans }}
                        </a>
                    {% endif %}
                </div>
            </div>
        </div>
    </section>
{% endblock %}
