{% form_theme form with app_form_themes() only %}

{% set payment_method = this.paymentMethod %}
{% set payment_configuration = payment_method ? payment_method.configuration : {} %}
{% set payment_method_label = payment_configuration['name'] ?? (payment_method ? payment_method.method|trans : null) %}

<div {{ attributes.defaults({ class: 'payment-form' }) }}>
    {% if payment_method %}
        <div class="mx-auto max-w-3xl">
            <div class="mb-8">
                <div class="text-xs font-medium uppercase tracking-label text-accent">
                    {{ 'checkout_design.badge_secure'|trans }}
                </div>
                <h1 class="mt-3 font-serif text-3xl uppercase text-foreground sm:text-4xl">
                    {{ 'payment.secure-space'|trans }}
                </h1>
                <p class="mt-3 text-sm leading-6 text-foreground/70 sm:text-base">
                    {{ 'payment.subtitle'|trans }}
                </p>
                {% if payment_method_label %}
                    <p class="mt-2 text-sm text-foreground/60">
                        {{ 'checkout_design.payment_label'|trans }} {{ payment_method_label }}
                    </p>
                {% endif %}
            </div>

            {{ form_start(form, {
                attr: {
                    class: 'grid gap-4',
                    'data-action': 'live#action:prevent',
                    'data-live-action-param': 'submitPayment',
                    'data-model': 'norender|*',
                    novalidate: 'true'
                }
            }) }}
                <div class="grid gap-4 sm:grid-cols-2">
                    {{ form_row(form.lastname) }}
                    {{ form_row(form.firstname) }}
                </div>
                {{ form_row(form.street) }}
                <div class="grid gap-4 sm:grid-cols-2">
                    {{ form_row(form.postalCode) }}
                    {{ form_row(form.city) }}
                </div>
                <div class="grid gap-4 sm:grid-cols-2">
                    {{ form_row(form.phone) }}
                    {{ form_row(form.email) }}
                </div>
                <div class="grid gap-4 sm:grid-cols-2">
                    {{ form_row(form.reference) }}
                    {{ form_row(form.amount) }}
                </div>
                {{ form_row(form.captcha) }}

                <button
                    type="submit"
                    data-loading="addAttribute(disabled)"
                    class="inline-flex min-h-12 items-center justify-center bg-foreground px-6 text-sm font-medium uppercase tracking-button text-on-foreground transition hover:bg-accent disabled:cursor-not-allowed disabled:bg-disabled"
                >
                    <span data-loading="hide">{{ 'payment.secure-space'|trans }}</span>
                    <span data-loading="show">{{ 'submit'|trans([], 'form') }}</span>
                </button>

                <div class="hidden">{{ form_rest(form) }}</div>
            {{ form_end(form) }}
        </div>
    {% else %}
        <div class="mx-auto max-w-3xl rounded-sm border border-error-border bg-error-surface px-5 py-4 text-sm text-error-foreground">
            {{ 'payment.missing_method'|trans }}
        </div>
    {% endif %}
</div>
