{% form_theme form with app_form_themes() only %}

<div {{ attributes }}>
    {{ form_start(form, {
        attr: {
            class: 'mt-6 grid gap-4',
            'data-model': 'norender|*',
            'data-action': 'live#action:prevent',
            'data-live-action-param': 'submitRegisterConfirm',
            novalidate: 'true'
        }
    }) }}
    <div class="grid gap-2">
        {{ form_label(form.email, null, {'label_attr': {'class': 'font-label text-[10px] font-semibold uppercase tracking-[0.16em] text-primary/70'}}) }}
        {{ form_widget(form.email, {'attr': {
            class: 'min-h-[46px] rounded-none border border-primary/12 bg-background px-4 text-[15px] text-primary/55 outline-none'
        }}) }}
        <div class="text-sm text-red-600">{{ form_errors(form.email) }}</div>
    </div>
    <div class="grid gap-2">
        {{ form_label(form.plainPassword, null, {'label_attr': {'class': 'font-label text-[10px] font-semibold uppercase tracking-[0.16em] text-primary/70'}}) }}
        {{ form_widget(form.plainPassword, {'attr': {
            class: 'min-h-[46px] rounded-none border border-primary/12 bg-white px-4 text-[15px] text-primary placeholder:text-primary/35 outline-none transition focus:border-primary',
            'data-action': 'blur->live#action',
            'data-live-action-param': 'validatePasswords'
        }}) }}
        <div class="text-sm text-red-600">{{ form_errors(form.plainPassword) }}</div>
    </div>
    <div class="grid gap-2">
        {{ form_label(form.passwordConfirmation, null, {'label_attr': {'class': 'font-label text-[10px] font-semibold uppercase tracking-[0.16em] text-primary/70'}}) }}
        {{ form_widget(form.passwordConfirmation, {'attr': {
            class: 'min-h-[46px] rounded-none border border-primary/12 bg-white px-4 text-[15px] text-primary placeholder:text-primary/35 outline-none transition focus:border-primary',
            'data-action': 'blur->live#action',
            'data-live-action-param': 'validatePasswords'
        }}) }}
        <div class="text-sm text-red-600">{{ form_errors(form.passwordConfirmation) }}</div>
        <div class="text-sm text-red-600">{{ form_errors(form) }}</div>
    </div>
    <div class="grid gap-2">
        {% if form.captcha is defined %}
            {{ form_row(form.captcha) }}
        {% endif %}
    </div>
    <button
        type="submit"
        class="inline-flex min-h-[46px] items-center justify-center bg-primary px-5 py-3 font-label text-[10px] font-semibold uppercase tracking-[0.18em] text-white transition hover:bg-secondary disabled:cursor-not-allowed disabled:bg-primary/30"
        {% if not this.canSubmit %}disabled{% endif %}
    >
        {{ 'security.register_confirm.submit'|trans }}
    </button>
    <div class="hidden">{{ form_rest(form) }}</div>
    {{ form_end(form) }}
</div>
