<div {{ attributes|raw }} class="grid grid-cols-1 gap-x-8 gap-y-10 py-16 md:grid-cols-3 border-t border-gray-200 dark:border-gray-800">
    <div>
        <h2 class="text-base/7 font-semibold text-gray-900 dark:text-gray-50">{{ 'userAccount.personalData.title'|trans({}, 'cms') }}</h2>
        <p class="mt-1 text-sm/6 text-gray-500 dark:text-gray-400">{{ 'userAccount.personalData.text'|trans({}, 'cms') }}</p>
    </div>

    {{ form_start(form, {
        attr: {
            'data-action': 'live#action:prevent',
            'data-live-action-param': 'save',
            'class': 'md:col-span-2'
        }
    }) }}

    <div class="overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-800">
        <div class="p-6">
            <div class="grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
                <div class="sm:col-span-3">
                    {{ form_row(form.firstname) }}
                </div>
                <div class="sm:col-span-3">
                    {{ form_row(form.lastname) }}
                </div>
                <div class="col-span-full">
                    {{ form_row(form.email) }}
                </div>
                <div class="sm:col-span-3">
                    {{ form_row(form.phone) }}
                </div>
                <div class="sm:col-span-3">
                    {{ form_row(form.mobile) }}
                </div>
                <div class="sm:col-span-3">
                    {{ form_row(form.locale) }}
                </div>
            </div>

            <div class="mt-8 border-t border-gray-200 pt-6 dark:border-gray-700">
                <h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100">{{ 'userAccount.personalData.addressTitle'|trans({}, 'cms') }}</h3>
                <p class="mt-1 text-sm/6 text-gray-500 dark:text-gray-400">{{ 'userAccount.personalData.addressText'|trans({}, 'cms') }}</p>

                <div class="mt-6 space-y-8">
                    {% for address in form.postalAddresses %}
                        <div class="space-y-3.5{{ not loop.first ? ' border-t border-gray-200 pt-6 dark:border-gray-700' : '' }}">
                            <mapbox-address-autofill class="block"
                                                     data-controller="ferienpass--cms-mapbox-autofill"
                                                     data-ferienpass--cms-mapbox-autofill-token-value="{{ this.mapboxToken }}">
                                {{ form_row(address.street, { attr: { autocomplete: 'address-line1', placeholder: 'onboarding.address.streetPlaceholder'|trans({}, 'cms') } }) }}
                                <p data-ferienpass--cms-mapbox-autofill-target="missingNumber" hidden class="mt-1 flex items-start gap-1.5 text-sm text-red-600 dark:text-red-400">
                                    <svg class="mt-0.5 h-3.5 w-3.5 flex-none" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 8v5"/><path d="M12 16h.01"/></svg>
                                    {{ 'onboarding.address.houseNumberMissing'|trans({}, 'cms') }}
                                </p>
                            </mapbox-address-autofill>
                            <div class="grid grid-cols-[120px_1fr] gap-3.5">
                                {{ form_row(address.postalCode, { attr: { autocomplete: 'postal-code' } }) }}
                                {{ form_row(address.city, { attr: { autocomplete: 'address-level2' } }) }}
                            </div>
                            {{ form_row(address.country) }}
                        </div>
                    {% endfor %}
                </div>
            </div>

            {{ form_row(form.request_token) }}
        </div>

        <div class="flex items-center justify-between gap-4 border-t border-gray-200 bg-gray-50 px-6 py-4 dark:border-gray-700 dark:bg-gray-800/60">
            <span class="hidden items-center gap-2 text-xs text-gray-500 sm:flex dark:text-gray-400">
                <svg class="h-3.5 w-3.5 flex-none" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
                {{ 'userAccount.personalData.note'|trans({}, 'cms') }}
            </span>
            {{ form_widget(form.submit, { attr: { class: 'whitespace-nowrap' } }) }}
        </div>
    </div>

    {{ form_end(form, { render_rest: false }) }}

    {% include '@Contao/components/_mapbox_consent_bar.html.twig' with { token: this.mapboxToken } only %}

</div>
