{% 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">
        <a href="{{ path('host_view_organization') }}"
           class="mb-4 inline-flex items-center gap-1 text-sm font-medium text-gray-500 transition-colors hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100">
            <twig:ux:icon name="ph:caret-left" class="size-4" /> Zurück
        </a>

        <twig:Admin:PageHeader title="{{ form.vars.value.name }}" />

        {% set fieldsets = form.children|map(
            f => f.vars['section'] is defined ? "#{f.vars['section']}" : null)|reduce(
            (unique, item) => not item or item in unique ? unique : unique|merge([item]), []
            ) %}

        {# Flat, divider-separated sections — a section label/description on the
           left and its fields on the right (no elevated cards). #}
        <div class="mt-6 divide-y divide-gray-200 dark:divide-gray-800">
            {% for fieldset in fieldsets %}
                <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">{{ "Host.#{fieldset}_legend"|trans }}</h2>
                        <p class="mt-1 text-sm/6 text-gray-500 dark:text-gray-400">{{ "Host.#{fieldset}_help"|trans }}</p>
                    </div>
                    <div class="space-y-6 md:col-span-2">
                        {% for field in form.children|filter(f => f.vars['section'] is defined and fieldset == f.vars['section']) %}
                            {{ form_row(field) }}
                        {% endfor %}
                    </div>
                </section>
            {% endfor %}

            {# Logo #}
            <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">{{ 'Host.logo_legend'|trans }}</h2>
                    <p class="mt-1 text-sm/6 text-gray-500 dark:text-gray-400">{{ 'Host.logo_help'|trans }}</p>
                </div>
                <div class="space-y-6 md:col-span-2">
                    {% if host.logo is not empty %}
                        <div>
                            <h3 class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">Aktuelles Logo</h3>
                            <div class="mt-2 rounded-lg border border-gray-200 bg-gray-50 px-6 py-4 dark:border-gray-700 dark:bg-gray-800/50">
                                {{ figure_html(host.logo | to_filesystem_item, '_host_details_logo') }}
                            </div>
                        </div>
                    {% endif %}
                    {{ form_widget(form.logo) }}
                </div>
            </section>
        </div>

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

        {# render widgets that do not belong to a fieldset (if any) #}
        {{ form_rest(form) }}

    </div>

    {{ form_end(form) }}

{% endblock %}
