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

{% block title %}Gutschein gekauft{% endblock %}

{% block content %}
    <div class="grid grid-cols-1 md:grid-cols-2 gap-8 px-4 lg:px-8 py-8 lg:py-16">
        <div>
            <h1 class="text-white uppercase pb-4 mb-8 border-b border-primary-bg/40">
                Vielen Dank
                <br>
                für deinen Gutscheinkauf
            </h1>

            {% if voucherNumber %}
                <div class="text-xl text-white mb-8">
                    Deine Gutscheinnummer lautet
                    <br>
                    <strong class="font-mono">{{ voucherNumber }}</strong>
                    {% if invoiceNumber %}
                        <br>
                        <span class="text-base">Rechnungsnummer <span class="font-mono">{{ invoiceNumber }}</span></span>
                    {% endif %}
                </div>
            {% endif %}

            <div class="pb-8">
                {% include '_partials/_alert.html.twig' with {
                    level: 'info',
                    messages: [
                        'Bitte überweise den Betrag von %s.'|format(total|format_currency('EUR')),
                        email
                            ? 'Sobald deine Zahlung eingegangen ist, erhältst du den Gutschein per E-Mail an %s.'|format(email)
                            : 'Sobald deine Zahlung eingegangen ist, erhältst du den Gutschein per E-Mail.'
                    ]
                } %}
            </div>

            {% if app.user %}
                <a href="{{ path('app_account') }}" class="button button--primary">
                    Zu meinem Konto
                </a>
            {% else %}
                {# hx-boost disabled for cross-origin #}
                <a href="{{ returnUrl }}" hx-boost="false" class="button button--primary">
                    Zurück
                </a>
            {% endif %}
        </div>
    </div>
{% endblock %}