{% trans_default_domain 'admin' %}
{% set translationPrefix = (this.routeName ?? app.request.get('_route'))|split('_')[1] %}

<div {{ attributes.defaults(stimulus_controller('ferienpass/admin-list', {
    key: filterType,
    viewKey: this.viewKey,
    viewPathPrefix: this.viewPathPrefix,
})).defaults({ class: 'group/list-busy' }) }}>

    {% set component = this %}
    {% set pagination = component.pagination(app.request) %}
    {% set items = pagination.results %}

    {% set hasFilters = component.filters|length > 0 %}
    {% set page_header_content = block('page_header') %}
    {% set head_actions_content = block('head_actions') %}
    {% embed '@FerienpassAdmin/components/list.html.twig' with { filter: hasFilters ? form : null, config: config|merge({layout: component.effectiveLayout, routeName: component.routeName}), exports: component.exports, exportUrls: component.exportUrls, createUrl: component.createUrl, headline: component.headline, page_header_content: page_header_content, head_actions_content: head_actions_content, hasFilters: hasFilters } %}
        {% block head_after %}
            {% if head_actions_content|trim is not empty %}
                {{ head_actions_content|raw }}
            {% endif %}
        {% endblock %}
        {% block header %}
            {% if page_header_content|trim is not empty %}
                {{ page_header_content|raw }}
            {% elseif headline or createUrl or exports or hasFilters %}
                {% include '@FerienpassAdmin/components/_list_header.html.twig' with { headline, createUrl, exports, hasFilters } %}
            {% endif %}
        {% endblock %}
        {% block head_before %}
            <div class="flex">
                {% if searchable is not empty %}
                    <div class="-mr-px grid grow grid-cols-1 focus-within:z-10">
                        <label for="search" class="sr-only">Liste durchsuchen</label>
                        <input type="search"
                               data-model="query"
                               name="search"
                               id="search"
                               class="col-start-1 row-start-1 block w-full {{ component.sortingFields ? 'rounded-l-md rounded-r-none' : 'rounded-md' }} bg-white py-1.5 pr-9 pl-10 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-primary-600 sm:pl-9 sm:pr-8 sm:text-sm/6 border-none ring-0 shadow-none dark:bg-white/5 dark:text-white dark:outline-white/10 dark:focus:outline-primary-500"
                               placeholder="Suchen…">
                        <twig:ux:icon name="ph:magnifying-glass" aria-hidden="true" class="pointer-events-none col-start-1 row-start-1 ml-3 size-5 self-center text-gray-400 sm:size-4" />
                        <twig:ux:icon name="ph:spinner-gap" aria-hidden="true" class="pointer-events-none col-start-1 row-start-1 mr-3 size-5 self-center justify-self-end text-gray-400 sm:size-4 animate-spin hidden group-[[busy]]/list-busy:block" />
                    </div>
                {% endif %}

                {% if component.sortingFields %}
                    <div class="relative flex shrink-0 items-center {{ searchable is not empty ? 'rounded-r-md' : 'rounded-md' }} bg-white outline-1 -outline-offset-1 outline-gray-300 hover:bg-gray-50 focus-within:z-10 focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-primary-600 dark:bg-white/5 dark:outline-white/10 dark:hover:bg-white/10 dark:focus-within:outline-primary-500">
                        <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
                            <twig:ux:icon name="ph:arrows-down-up" aria-hidden="true" class="-ml-0.5 size-4 text-gray-400" />
                        </div>
                        <label for="sorting" class="sr-only">Sortierung</label>
                        <select data-model="sorting" id="sorting" name="sorting" class="block w-full appearance-none bg-transparent py-1.5 pl-9 pr-3 text-sm font-semibold text-gray-900 border-none ring-0 focus:ring-0 cursor-pointer dark:text-gray-100">
                            {% for field in component.sortingFields %}
                                <option value="{{ field }}">{{ "#{translationPrefix}.sorting.#{field}"|trans({}, 'admin') }}</option>
                            {% endfor %}
                        </select>
                    </div>
                {% endif %}
            </div>

        {% endblock %}
    {% endembed %}
    {% if false %}{% block page_header %}{% endblock %}{% block head_actions %}{% endblock %}{% endif %}
</div>
