{% extends '@Contao/fragment/_container.html.twig' %}

{% block container %}

    <div class="sm:text-center">
        <h1 class="text-2xl sm:text-4xl font-bold">{{ 'payment.pay.title'|trans({}, 'cms') }}</h1>
        <p class="text-gray-600 text-lg">{{ 'payment.pay.prompt'|trans({}, 'cms') }}</p>
    </div>

    {% if form is defined %}

        {{ form_start(form) }}

        <div class="mt-12 max-w-lg mx-auto">
            <h2 class="font-semibold text-lg text-gray-900">{{ 'payment.pay.completeAddress'|trans({}, 'cms') }}</h2>

            <div class="mt-2 space-y-6">
                {{ form_row(form.name) }}
                {{ form_row(form.street) }}
                {{ form_row(form.postalCode) }}
                {{ form_row(form.city) }}
                {{ form_row(form.country) }}
                {{ form_row(form.submit) }}
            </div>
        </div>

        {{ form_end(form) }}

    {% elseif not payUrl|default %}

        {% if paymentProviderError|default %}
            {% include '@FerienpassCms/partial/modal_error.html.twig' with {
                headline: 'payment.pay.errorOccurred.title'|trans({}, 'cms'),
                text: 'payment.pay.errorOccurred.temporary'|trans({}, 'cms'),
            } %}
        {% else %}
            {% include '@FerienpassCms/partial/modal_error.html.twig' with {
                headline: 'payment.pay.errorOccurred.title'|trans({}, 'cms'),
                text: 'payment.pay.errorOccurred.invalidLink'|trans({}, 'cms'),
            } %}
        {% endif %}

    {% else %}
        <fieldset class="mt-8">
            <legend class="text-base font-semibold leading-6 text-gray-900 dark:text-gray-50">{{ 'payment.pay.offersTitle'|trans({}, 'cms') }}
            </legend>
            <div class="mt-4 divide-y divide-gray-200 dark:divide-gray-800 border-b border-t border-gray-200 dark:border-gray-800">
                {% for item in payment.items %}
                    <div class="relative flex items-start py-4">
                        <div class="min-w-0 flex-1 text-sm leading-6">
                            {% if item.discount %}
                                <div class="select-none flex justify-between">
                                    <span class="font-semibold text-gray-900 dark:text-gray-50">Guthaben</span>
                                    <span class="text-gray-700 dark:text-gray-200">{{ (item.amount/100)|format_currency('EUR') }}</span>
                                </div>
                            {% elseif item.attendance is null %}
                                <div class="select-none flex justify-between">
                                    <span class="font-semibold text-gray-900 dark:text-gray-50">Gelöschte Teilnahme</span>
                                    <span class="text-gray-700 dark:text-gray-200">{{ (item.amount/100)|format_currency('EUR') }}</span>
                                </div>
                            {% else %}
                                <label for="{{ "attendance-#{item.attendance.id}" }}"
                                       class="select-none flex justify-between">
                                    <span class="font-semibold text-gray-900 dark:text-gray-50">{{ item.attendance.offer.name }}
                                        <span class="font-normal">({{ item.attendance.participant.name }})</span></span>
                                    <span class="text-gray-700 dark:text-gray-200">{{ (item.amount/100)|format_currency('EUR') }}</span>
                                </label>
                            {% endif %}
                        </div>
                    </div>
                {% endfor %}
            </div>
        </fieldset>


        <p class="mt-6 text-gray-700 dark:text-gray-300">
            <span class="font-medium">{{ 'payment.pay.amountLabel'|trans({}, 'cms') }}</span> {{ (payment.totalAmount/100)|format_currency('EUR') }}
        </p>

        <div class="mt-6 md:flex md:items-center md:space-x-2">
            <twig:Cms:Button variant="primary" href="{{ payUrl }}">
                {{ 'payment.pay.payNow'|trans({'amount': payment.totalAmount/100}, 'cms') }}
            </twig:Cms:Button>

            <p class="mt-2 md:mt-0 text-sm text-gray-600 dark:text-gray-200">{{ 'payment.pay.redirectInfo'|trans({}, 'cms') }}</p>
        </div>
    {% endif %}

{% endblock %}
