{% 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: 'theme-payment-form' }) }}>
    {% if payment_method %}
        <article class="theme-auth-card theme-auth-card--single">
            <div class="theme-auth-card__heading">
                <p class="theme-eyebrow">{{ 'checkout_design.badge_secure'|trans }}</p>
                <h1>{{ 'payment.secure-space'|trans }}</h1>
                <p>{{ 'payment.subtitle'|trans }}</p>
                {% if payment_method_label %}
                    <p class="theme-payment-method">
                        {{ 'checkout_design.payment_label'|trans }} {{ payment_method_label }}
                    </p>
                {% endif %}
            </div>

            {{ form_start(form, {
                attr: {
                    class: 'theme-auth-form',
                    'data-action': 'live#action:prevent',
                    'data-live-action-param': 'submitPayment',
                    'data-model': 'norender|*',
                    novalidate: 'true'
                }
            }) }}
                <div class="theme-account-form__grid">
                    <div class="theme-form-field">{{ form_row(form.lastname) }}</div>
                    <div class="theme-form-field">{{ form_row(form.firstname) }}</div>
                    <div class="theme-form-field theme-account-form__wide">{{ form_row(form.street) }}</div>
                    <div class="theme-form-field">{{ form_row(form.postalCode) }}</div>
                    <div class="theme-form-field">{{ form_row(form.city) }}</div>
                    <div class="theme-form-field">{{ form_row(form.phone) }}</div>
                    <div class="theme-form-field">{{ form_row(form.email) }}</div>
                    <div class="theme-form-field">{{ form_row(form.reference) }}</div>
                    <div class="theme-form-field">{{ form_row(form.amount) }}</div>
                    <div class="theme-form-field theme-account-form__wide">{{ form_row(form.captcha) }}</div>
                </div>

                <button
                    type="submit"
                    data-loading="addAttribute(disabled)"
                    class="theme-form-button theme-form-button--fill"
                >
                    <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) }}
        </article>
    {% else %}
        <div class="theme-payment-alert" role="alert">{{ 'payment.missing_method'|trans }}</div>
    {% endif %}
</div>
