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

{% block content %}

    {{ form_start(form) }}

    <div class="sticky z-10 top-0 bg-white dark:bg-gray-900 border-b border-gray-300 shadow-sm py-4 px-4 sm:px-6 md:px-8 lg:px-16">

        <div>
            <a class="flex items-center text-sm leading-5 font-medium text-gray-500 hover:text-gray-700 focus:outline-none focus:underline transition duration-150 ease-in-out"
               href="{{ path('host_view_organization') }}">
                <span class="flex-shrink-0 -ml-1 mr-1 h-5 w-5 text-gray-400"><twig:ux:icon name="ph:caret-left" /></span>
                Zurück
            </a>
        </div>
        <div class="mt-2 md:flex md:items-center md:justify-between">
            <div class="flex-1 min-w-0">
                <h2 class="text-2xl font-bold leading-7 text-gray-900 dark:text-gray-50 sm:text-3xl sm:leading-9 sm:truncate">
                    {{ form.vars.value.name }}
                </h2>
            </div>
            <div class="mt-5 flex md:flex-row-reverse md:mt-0 md:ml-4">
                {{ form_widget(form.submit) }}
            </div>
        </div>

    </div>

    <div class="max-w-7xl mx-auto px-4 sm:px-6 md:px-8 lg:px-12 py-4 sm:py-6 md:py-12 lg:px-16">

        {% 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]), []
            ) %}

        {# render all fieldsets #}
        <div class="space-y-10">
            {% for fieldset in fieldsets %}
                <div class="mt-10 sm:mt-0">
                    <div class="md:grid md:grid-cols-3 md:gap-6">
                        <div class="md:col-span-1">
                            <div class="px-4 sm:px-0">
                                <h3 class="text-lg font-medium leading-6 text-gray-900 dark:text-gray-50">{{ "Host.#{fieldset}_legend"|trans }}</h3>
                                <div class="mt-1 text-sm leading-5 text-gray-500 dark:text-gray-300">
                                    <p>{{ "Host.#{fieldset}_help"|trans }}</p>
                                </div>
                            </div>
                        </div>
                        <div class="mt-5 md:mt-0 md:col-span-2">
                            <div class="shadow overflow-hidden sm:rounded-md">
                                <div class="px-4 py-5 bg-white dark:bg-gray-900 sm:p-6">
                                    <div class="space-y-6">
                                        {% for field in form.children|filter(f => f.vars['section'] is defined and fieldset == f.vars['section']) %}
                                            {{ form_row(field) }}
                                        {% endfor %}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            {% endfor %}

            {# Logo #}
            <div class="mt-10 sm:mt-0">
                <div class="md:grid md:grid-cols-3 md:gap-6">
                    <div class="md:col-span-1">
                        <div class="px-4 sm:px-0">
                            <h3 class="text-lg font-medium leading-6 text-gray-900">{{ 'Host.logo_legend'|trans }}</h3>
                            <div class="mt-1 text-sm leading-5 text-gray-500">
                                <p>{{ 'Host.logo_help'|trans }}</p>
                            </div>
                        </div>
                    </div>
                    <div class="mt-5 md:mt-0 md:col-span-2">
                        <div class="shadow overflow-hidden sm:rounded-md">
                            <div class="px-4 py-5 bg-white sm:p-6">
                                {% if host.logo is not empty %}
                                    <h4 class="text-gray-500 uppercase tracking-wide text-sm">Aktuelles Logo</h4>
                                    <div class="mt-1 mb-4 bg-gray-100 border-2 border-dashed px-6 py-4">
                                        {{ contao_figure(host.logo | to_filesystem_item, '_host_details_logo') }}
                                    </div>
                                {% endif %}

                                {{ form_widget(form.logo) }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

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

    </div>

    {{ form_end(form) }}

{% endblock %}