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

{% block content %}

    {{ form_start(form) }}

    <div class="mx-auto max-w-5xl px-4 py-8 sm:px-6 lg:px-8">
        {# Flat, divider-separated sections — a section label/description on the
           left and its fields on the right (no elevated cards). #}
        <div class="divide-y divide-gray-200 dark:divide-gray-800">
            <section class="grid grid-cols-1 gap-x-8 gap-y-6 py-8 first:pt-0 md:grid-cols-3">
                <div>
                    <h2 class="text-base/7 font-semibold text-gray-900 dark:text-white">Ihre persönlichen Daten</h2>
                    <p class="mt-1 text-sm/6 text-gray-500 dark:text-gray-400">Ihre persönlichen Daten</p>
                </div>
                <div class="space-y-6 md:col-span-2">
                    {{ form_row(form.firstname) }}
                    {{ form_row(form.lastname) }}
                    {{ form_row(form.userPhone) }}
                </div>
            </section>

            <section class="grid grid-cols-1 gap-x-8 gap-y-6 py-8 md:grid-cols-3">
                <div>
                    <h2 class="text-base/7 font-semibold text-gray-900 dark:text-white">Ihre persönlichen Zugangsdaten</h2>
                    <p class="mt-1 text-sm/6 text-gray-500 dark:text-gray-400">Dieses werden Ihre Zugangsdaten NACH erfolgreicher Aktivierung sein.</p>
                </div>
                <div class="space-y-6 md:col-span-2">
                    {{ form_row(form.userEmail) }}
                    {{ form_row(form.userPassword) }}
                </div>
            </section>

            <section class="grid grid-cols-1 gap-x-8 gap-y-6 py-8 md:grid-cols-3">
                <div>
                    <h2 class="text-base/7 font-semibold text-gray-900 dark:text-white">Angaben zum Veranstalter</h2>
                    <p class="mt-1 text-sm/6 text-gray-500 dark:text-gray-400">Bitte geben Sie Ihre Daten als Veranstalter ein. Diese werden später auf der Webseite veröffentlicht.</p>
                </div>
                <div class="space-y-6 md:col-span-2">
                    {{ form_row(form.name) }}
                    {{ form_row(form.street) }}
                    {{ form_row(form.postal) }}
                    {{ form_row(form.city) }}
                    {{ form_row(form.email) }}
                    {{ form_row(form.phone) }}
                    {{ form_row(form.website) }}
                    {{ form_row(form.text) }}
                </div>
            </section>
        </div>

        <div class="mt-8 flex justify-end">
            {{ form_widget(form.submit) }}
        </div>

        {{ form_rest(form) }}

    </div>

    {{ form_end(form) }}

{% endblock %}
