{% extends "@FerienpassAdmin/layout/base.html.twig" %}

{% trans_default_domain 'admin' %}
{% set title = headline|default('user.title') %}

{% block main %}

    <twig:Admin:PageHeader
            title="user.title"
            subtitle="user.subtitle"
    />

    {# Two sections on one page — each with its own form + save button,
       mirroring the cms-bundle account pattern. The left column carries the
       h2/description, the right column carries the form card. #}
    <div class="divide-y divide-gray-200 dark:divide-gray-800">

        {# ─── Kontaktdaten ─────────────────────────────────────────────── #}
        <div class="grid grid-cols-1 gap-x-8 gap-y-6 py-10 md:grid-cols-3">
            <div>
                <h2 class="text-base/7 font-semibold text-gray-900 dark:text-gray-50">{{ 'user.legend.personal.0'|trans }}</h2>
                <p class="mt-1 text-sm/6 text-gray-500 dark:text-gray-400">{{ 'user.legend.personal.desc'|trans }}</p>
            </div>

            {{ form_start(personalForm, { attr: { 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-5 sm:grid-cols-6">
                        <div class="sm:col-span-3">{{ form_row(personalForm.firstname) }}</div>
                        <div class="sm:col-span-3">{{ form_row(personalForm.lastname) }}</div>
                        <div class="col-span-full">{{ form_row(personalForm.email) }}</div>
                        <div class="sm:col-span-3">{{ form_row(personalForm.phone) }}</div>
                        <div class="sm:col-span-3">{{ form_row(personalForm.mobile) }}</div>
                        <div class="sm:col-span-3">{{ form_row(personalForm.locale) }}</div>
                    </div>
                </div>
                <div class="flex items-center justify-end gap-3 border-t border-gray-200 bg-gray-50/60 px-6 py-3 dark:border-gray-700 dark:bg-gray-800/60">
                    <twig:Admin:Button variant="primary" size="sm" type="submit">
                        <twig:ux:icon name="ph:check" class="size-4 mr-1.5" />
                        Speichern
                    </twig:Admin:Button>
                </div>
            </div>
            {{ form_end(personalForm) }}
        </div>

        {# ─── Öffentliches Profil ──────────────────────────────────────── #}
        <div class="grid grid-cols-1 gap-x-8 gap-y-6 py-10 md:grid-cols-3">
            <div>
                <h2 class="text-base/7 font-semibold text-gray-900 dark:text-gray-50">{{ 'user.legend.public.0'|trans }}</h2>
                <p class="mt-1 text-sm/6 text-gray-500 dark:text-gray-400">{{ 'user.legend.public.desc'|trans }}</p>
            </div>

            {{ form_start(publicForm, { attr: { 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">
                    {{ form_row(publicForm.publicFields) }}
                </div>
                <div class="flex items-center justify-end gap-3 border-t border-gray-200 bg-gray-50/60 px-6 py-3 dark:border-gray-700 dark:bg-gray-800/60">
                    <twig:Admin:Button variant="primary" size="sm" type="submit">
                        <twig:ux:icon name="ph:check" class="size-4 mr-1.5" />
                        Speichern
                    </twig:Admin:Button>
                </div>
            </div>
            {{ form_end(publicForm) }}
        </div>

    </div>

{% endblock %}
