{% trans_default_domain 'admin' %}

<div class="divide-y divide-gray-300 dark:divide-gray-700">

    <div class="flex flex-col sm:flex-row-reverse gap-x-6 lg:gap-x-12 gap-y-12">

        {% if filter|default(null) is not null %}
            <div data-ferienpass--admin-list-target="sidebar"
                 data-transition-enter="transition-all ease-in-out duration-300"
                 data-transition-enter-start="translate-x-full sm:-mr-64"
                 data-transition-enter-end="translate-x-0 sm:mr-0"
                 data-transition-leave="transition-all ease-in-out duration-300"
                 data-transition-leave-start="translate-x-0 sm:mr-0"
                 data-transition-leave-end="translate-x-full sm:-mr-64"
                 class="hidden sticky top-0 w-full sm:w-64 shrink-0 divide-y divide-gray-300 dark:divide-gray-700">
<div class="flex items-center space-x-2 py-5">
                    <h2 class="text-lg font-bold text-gray-900 dark:text-gray-100">Filter</h2>
                    <div class="flex-1"></div>
<div class="flex items-center gap-1 shrink-0">
                        {% if filterData|length %}
                            <button type="button"
                                    data-action="live#action"
                                    data-live-action-param="resetFilters"
                                    class="text-gray-400 hover:text-gray-900 dark:text-gray-500 dark:hover:text-gray-100 transition-colors hover:bg-gray-100 dark:hover:bg-gray-800 rounded-md p-1.5"
                                    title="Filter zurücksetzen">
                                <span class="sr-only">Filter zurücksetzen</span>
                                <span class="size-5 block" aria-hidden="true">
                                    <twig:ux:icon name="ph:funnel-x"/>
                                </span>
                            </button>
                        {% endif %}
                        <button type="button"
                                data-action="ferienpass--admin-list#collapse"
                                class="-mr-2.5 text-gray-400 hover:text-gray-900 dark:text-gray-500 dark:hover:text-gray-100 transition-colors hover:bg-gray-100 dark:hover:bg-gray-800 rounded-md p-1.5"
                                title="Filter ausblenden">
                            <span class="sr-only">Filter ausblenden</span>
                            <span class="size-5 block" aria-hidden="true">
                                <twig:ux:icon name="ph:x"/>
                            </span>
                        </button>
                    </div>
                </div>
                <aside class="py-2 overflow-y-auto">
                    {% include '@FerienpassAdmin/components/_sidebar_filter.html.twig' with filter %}
                </aside>
            </div>
        {% endif %}

        <div class="flex-1 min-w-0 divide-y divide-gray-300 dark:divide-gray-700">

            {% block header %}{% endblock %}

            <div class="flex flex-wrap items-center justify-between gap-x-3 gap-y-2 py-4">
                {% set iconBtn = 'text-gray-400 dark:text-gray-500 hover:text-gray-900 dark:hover:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-800 aria-pressed:bg-gray-100 dark:aria-pressed:bg-gray-800 aria-pressed:text-gray-900 dark:aria-pressed:text-gray-100 aria-pressed:hover:bg-gray-200 dark:aria-pressed:hover:bg-gray-700 transition-colors rounded-md p-1.5 cursor-pointer' %}

                <div class="flex flex-wrap items-center gap-x-2 gap-y-2 min-w-0">
                    {% block head_before %}{% endblock %}

                    {% if filter|default(null) is not null %}
                        {% set _activeFilters = filter.children|filter((v, k) => k in this.filters and not v.vars.isEmpty and k not in (routeParameters ?? app.request.get('_route_params'))|keys) %}
                        {% if _activeFilters is not empty %}
                            <div data-ferienpass--admin-list-target="pills"
                                 class="hidden flex flex-wrap items-center gap-1.5 min-w-0">
                                {% for filterName, active in _activeFilters %}
                                    <span class="inline-flex items-center gap-x-1.5 rounded-md bg-white py-[7.5px] text-sm font-semibold px-3.5 text-gray-700 outline-1 -outline-offset-1 outline-primary-600 shadow-sm shadow-primary-600/30 dark:bg-white/5 dark:text-gray-200 dark:outline-primary-500 dark:shadow-primary-500/40">
                                        {{ active.vars.humanReadable|trans }}
                                        <button type="button"
                                                data-action="live#action"
                                                data-live-action-param="unsetFilter"
                                                data-live-filter-name-param="{{ filterName }}"
                                                class="group grid size-4 -mr-1.5 place-items-center rounded-sm hover:bg-gray-100 dark:hover:bg-white/10 cursor-pointer">
                                            <span class="sr-only">Filter löschen</span>
                                            <twig:ux:icon name="ph:x" class="size-3.5 text-gray-400 group-hover:text-gray-700 dark:text-gray-500 dark:group-hover:text-gray-200"/>
                                        </button>
                                    </span>
                                {% endfor %}
                            </div>
                        {% endif %}
                    {% endif %}

                </div>

                <div class="flex items-center shrink-0 -mr-1">
                    {% block head_after %}{% endblock %}

                    {% if config.layout is defined %}
                        <button type="button"
                                data-action="live#action"
                                data-live-action-param="toggleLayout"
                                class="{{ iconBtn }}"
                                title="{{ config.layout == 'table' ? 'Zur Listenansicht wechseln' : 'Zur Tabellenansicht wechseln' }}">
                            <span class="sr-only">{{ config.layout == 'table' ? 'Zur Listenansicht wechseln' : 'Zur Tabellenansicht wechseln' }}</span>
                            <span class="size-5 block" aria-hidden="true">
                                {% if config.layout == 'table' %}
                                    <twig:ux:icon name="ph:list"/>
                                {% else %}
                                    <twig:ux:icon name="ph:grid-nine"/>
                                {% endif %}
                            </span>
                        </button>
                    {% endif %}

                    {% if hasFilters|default(false) %}
                        <button type="button"
                                data-action="ferienpass--admin-list#toggle"
                                data-ferienpass--admin-list-target="button"
                                aria-pressed="false"
                                class="{{ iconBtn }}"
                                title="Filter anzeigen">
                            <span class="sr-only">Filter anzeigen</span>
                            <span class="size-5 block" aria-hidden="true">
                                <twig:ux:icon name="ph:funnel"/>
                            </span>
                        </button>
                    {% endif %}

                    {% if exports|default is not empty %}
                        <div data-live-ignore>
                        {% component 'Admin:Dropdown' with { position: 'left' } %}
                            {% block toggle %}
                                <button type="button" class="{{ iconBtn }}" title="Exportieren">
                                    <span class="sr-only">Exportieren</span>
                                    <span class="size-5 block" aria-hidden="true">
                                        <twig:ux:icon name="ph:export"/>
                                    </span>
                                </button>
                            {% endblock %}
                            {% block dropdown %}
                                {% set fileIcons = {'pdf': 'file-pdf', 'xlsx': 'file-xls', 'docx': 'file-doc', 'xml': 'file-code', 'csv': 'file-csv'} %}
                                {% for format, url in exportUrls|default({}) %}
                                    <twig:Admin:DropdownItem href="{{ url }}">
                                        <span class="mr-1.5 size-4 flex-shrink-0 text-gray-400">{{ ux_icon('ph:'~(fileIcons[format]|default('file'))) }}</span>
                                        <span class="text-left leading-tight">{{ format|upper }}</span>
                                    </twig:Admin:DropdownItem>
                                {% endfor %}
                            {% endblock %}
                        {% endcomponent %}
                        </div>
                    {% endif %}

                </div>
            </div>

            {% if config.layout|default('table') == 'table' and config.columns is defined %}
                {% include '@FerienpassAdmin/components/_list.table.html.twig' with config %}
            {% else %}
                {% include '@FerienpassAdmin/components/_list.html.twig' with config|default([]) %}
            {% endif %}

        </div>

    </div>

</div>

{% if pagination is defined %}
    <div class="py-10">
        {% include '@FerienpassAdmin/components/_pagination.html.twig' %}
    </div>
{% endif %}
