<div class="flex items-center gap-3 border-b border-gray-200 bg-gray-50 px-6 py-5 dark:border-gray-700 dark:bg-gray-800/60">
    <div class="grid h-8 w-8 flex-none place-items-center rounded-lg bg-primary-600 text-sm font-bold text-white">4</div>
    <div>
        <h2 class="text-xl font-bold leading-tight text-gray-900 dark:text-white">{{ 'onboarding.address.cardTitle'|trans({}, 'cms') }}</h2>
        <div class="mt-0.5 text-sm font-medium text-gray-500 dark:text-gray-400">{{ 'onboarding.address.cardSub'|trans({}, 'cms') }}</div>
    </div>
</div>

{{ form_start(form, { attr: { 'data-action': 'live#action:prevent', 'data-live-action-param': 'save' } }) }}

<div class="px-6 py-6">

    <div class="mb-5 flex items-start gap-3 rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-[13px] leading-relaxed text-emerald-900 dark:border-emerald-900/50 dark:bg-emerald-900/20 dark:text-emerald-200">
        <svg class="mt-0.5 h-[18px] w-[18px] flex-none text-emerald-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-7 8-13a8 8 0 1 0-16 0c0 6 8 13 8 13z"/><circle cx="12" cy="9" r="2.5"/></svg>
        <div>{{ 'onboarding.address.help'|trans({}, 'cms') }}</div>
    </div>

    <div class="space-y-3.5">
        {% set address = form.postalAddresses|first %}
        {% if address %}
            <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) }}
        {% endif %}
        {{ form_row(form.request_token) }}
    </div>

</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">
    <twig:Cms:Button variant="ghost" size="xs"
            data-action="live#action:prevent"
            data-live-action-param="back"
            class="gap-1.5 rounded-lg py-2.5 text-[13.5px] text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
        <svg class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5"/><path d="m11 18-6-6 6-6"/></svg>
        {{ 'onboarding.back'|trans({}, 'cms') }}
    </twig:Cms:Button>
    <twig:Cms:Button variant="primary" size="xl" rounded="xl"
            type="submit"
            data-action="live#action:prevent"
            data-live-action-param="saveAndContinue"
            class="gap-2">
        {{ 'registrationWelcomeSteps.anschrift.submit'|trans({}, 'cms') }}
        <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m13 6 6 6-6 6"/></svg>
    </twig:Cms:Button>
</div>

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

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