{% form_theme form with app_form_themes() only %}

{% set input_class = 'w-full border border-primary/15 bg-surface px-5 py-4 text-primary outline-none transition placeholder:text-primary/40 focus:border-primary' %}
{% set label_class = 'font-label text-[12px] font-semibold uppercase tracking-[0.16em] text-primary' %}
{% set error_class = 'text-sm leading-6 text-red-700' %}

<div {{ attributes }}>
    {{ form_start(form, {
        attr: {
            class: 'space-y-8 border border-primary/10 bg-white p-6 md:p-10',
            'data-action': 'live#action:prevent',
            'data-live-action-param': 'submitContact',
            'data-model': 'norender|*',
            novalidate: 'true'
        }
    }) }}
        <div class="mb-8">
            <span class="mb-3 block font-label text-[12px] font-semibold uppercase tracking-[0.2em] text-secondary">{{ 'theme.contact.form.kicker'|trans }}</span>
            <h2 class="font-display text-[40px] font-semibold [font-optical-sizing:auto] text-primary">{{ 'theme.contact.form.title'|trans }}</h2>
        </div>

        <div class="grid grid-cols-1 gap-5 md:grid-cols-2">
            <div class="flex min-w-0 flex-col gap-2">
                <label for="{{ form.lastname.vars.id }}" class="{{ label_class }}">{{ 'theme.contact.form.lastname.label'|trans }}</label>
                {{ form_widget(form.lastname, {
                    attr: {
                        class: input_class,
                        placeholder: 'theme.contact.form.lastname.placeholder'|trans
                    }
                }) }}
                <div class="{{ error_class }}">{{ form_errors(form.lastname) }}</div>
            </div>

            <div class="flex min-w-0 flex-col gap-2">
                <label for="{{ form.firstname.vars.id }}" class="{{ label_class }}">{{ 'theme.contact.form.firstname.label'|trans }}</label>
                {{ form_widget(form.firstname, {
                    attr: {
                        class: input_class,
                        placeholder: 'theme.contact.form.firstname.placeholder'|trans
                    }
                }) }}
                <div class="{{ error_class }}">{{ form_errors(form.firstname) }}</div>
            </div>

            <div class="flex min-w-0 flex-col gap-2">
                <label for="{{ form.email.vars.id }}" class="{{ label_class }}">{{ 'theme.contact.form.email.label'|trans }}</label>
                {{ form_widget(form.email, {
                    attr: {
                        class: input_class,
                        placeholder: 'theme.contact.form.email.placeholder'|trans
                    }
                }) }}
                <div class="{{ error_class }}">{{ form_errors(form.email) }}</div>
            </div>

            <div class="flex min-w-0 flex-col gap-2">
                <label for="{{ form.phone.vars.id }}" class="{{ label_class }}">{{ 'theme.contact.form.phone.label'|trans }}</label>
                {{ form_widget(form.phone, {
                    attr: {
                        class: input_class,
                        placeholder: 'theme.contact.form.phone.placeholder'|trans
                    }
                }) }}
                <div class="{{ error_class }}">{{ form_errors(form.phone) }}</div>
            </div>

            <div class="flex min-w-0 flex-col gap-2 md:col-span-2">
                <label for="{{ form.object.vars.id }}" class="{{ label_class }}">{{ 'theme.contact.form.subject.label'|trans }}</label>
                {{ form_widget(form.object, {
                    attr: {
                        class: input_class,
                        placeholder: 'theme.contact.form.subject.placeholder'|trans
                    }
                }) }}
                <div class="{{ error_class }}">{{ form_errors(form.object) }}</div>
            </div>

            <div class="flex min-w-0 flex-col gap-2 md:col-span-2">
                <label for="{{ form.message.vars.id }}" class="{{ label_class }}">{{ 'theme.contact.form.message.label'|trans }}</label>
                {{ form_widget(form.message, {
                    attr: {
                        class: input_class ~ ' min-h-[180px] resize-y',
                        placeholder: 'theme.contact.form.message.placeholder'|trans
                    }
                }) }}
                <div class="{{ error_class }}">{{ form_errors(form.message) }}</div>
            </div>

            <div class="md:col-span-2">
                {{ form_row(form.captcha) }}
            </div>
        </div>

        <div class="mt-8 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
            <p class="max-w-md text-sm leading-7 text-on-surface-variant">{{ 'theme.contact.form.notice'|trans }}</p>
            <button
                type="submit"
                data-loading="action(submitContact)|addAttribute(disabled)"
                class="inline-flex min-w-[180px] items-center justify-center bg-primary px-8 py-4 font-label text-[12px] uppercase tracking-[0.18em] text-white transition-all hover:bg-secondary disabled:cursor-wait disabled:opacity-60"
            >
                <span data-loading="hide">{{ 'theme.contact.form.submit'|trans }}</span>
                <span data-loading="show">{{ 'theme.contact.form.sending'|trans }}</span>
            </button>
        </div>

        <div class="hidden">{{ form_rest(form) }}</div>
    {{ form_end(form) }}
</div>
