{% form_theme form with app_form_themes() only %}

<div {{ attributes }}>
    {{ form_start(form, {
        attr: {
            class: 'mt-5 grid gap-4',
            'data-model': 'on(input)|*',
            'data-action': 'live#action:prevent',
            'data-live-action-param': 'submitRegister',
            novalidate: 'true'
        }
    }) }}
        <div class="grid gap-2">
            {{ form_label(form.email, null, {'label_attr': {'class': 'text-sm font-medium text-[#382d28]'}}) }}
            {{ form_widget(form.email, {'attr': {
                class: 'h-12 bg-white px-5 text-[#201917] placeholder:text-[#9f8b72] ring-1 ring-inset ring-[#e3d6c2] focus:ring-1 focus:ring-inset focus:ring-[#9d7c47]'
            }}) }}
            <div class="text-sm text-red-600">{{ form_errors(form.email) }}</div>
        </div>
        <label class="inline-flex items-start gap-3 bg-white px-4 py-3 text-sm leading-6 text-[#5d4b41]">
            {{ form_widget(form.marketingOptIn, {'attr': {'class': 'mt-1 border-[#cfb183] text-[#9d7c47] focus:ring-0'}}) }}
            <span>{{ form.marketingOptIn.vars.label|trans({}, form.marketingOptIn.vars.translation_domain) }}</span>
        </label>
        <button
            type="submit"
            class="inline-flex min-h-12 items-center justify-center border border-[#201917] px-6 text-sm font-medium uppercase tracking-[0.24em] text-[#201917] transition hover:border-[#9d7c47] hover:bg-[#9d7c47] hover:text-white disabled:cursor-not-allowed disabled:border-[#c7b8a1] disabled:text-[#c7b8a1] disabled:hover:bg-transparent"
            {% if not this.canSubmit %}disabled{% endif %}
        >
            {{ 'security.register.submit'|trans }}
        </button>
        <p class="text-xs leading-6 text-[#5d4b41]">
            {{ 'security.register.terms_prefix'|trans }}
            <a href="{{ path('legals') }}#conditions-utilisation" class="underline underline-offset-4 transition hover:text-[#201917]">
                {{ 'security.register.terms_link'|trans }}
            </a>.
        </p>
        <div class="hidden">{{ form_rest(form) }}</div>
    {{ form_end(form) }}
</div>
