<div data-results-list>
{% if results.offers|default([]) is not empty %}
    <el-command-group hidden aria-labelledby="offers-label">
        {% if page|default(1) == 1 %}
            <h2 id="offers-label" class="text-xs font-semibold text-gray-900 dark:text-white">Angebote</h2>
        {% endif %}
        <div class="-mx-4 mt-2 text-sm text-gray-700 dark:text-gray-300">
            {% for offer in results.offers %}
                <a id="offer-{{ offer.id }}" href="{{ path('admin_offers_show', {uuid: offer.uuid.toBase58}) }}" hidden data-type="project" data-entity-type="offer" data-uuid="{{ offer.uuid }}" class="group flex cursor-default items-center px-4 py-2 select-none focus:outline-hidden aria-selected:bg-primary-600 aria-selected:text-white dark:aria-selected:bg-primary-500">
                    <twig:ux:icon name="ph:calendar" class="size-6 flex-none text-gray-400 group-aria-selected:text-white dark:text-gray-500" />
                    <span class="ml-3 flex-auto truncate">{{ offer.name }} <span class="text-gray-400 dark:text-gray-500">{{ offer.date }}</span></span>
                    <twig:ux:icon name="ph:caret-right" class="ml-3 hidden size-5 flex-none text-gray-400 group-aria-selected:block dark:text-gray-500" />
                </a>
            {% endfor %}
        </div>
    </el-command-group>
{% endif %}

{% if results.editions|default([]) is not empty %}
    <el-command-group hidden aria-labelledby="editions-label">
        {% if page|default(1) == 1 %}
            <h2 id="editions-label" class="text-xs font-semibold text-gray-900 dark:text-white">Ferienpässe</h2>
        {% endif %}
        <div class="-mx-4 mt-2 text-sm text-gray-700 dark:text-gray-300">
            {% for edition in results.editions %}
                <a id="edition-{{ edition.id }}" href="{{ path('admin_editions_show', {alias: edition.alias}) }}" hidden data-type="project" data-entity-type="edition" data-uuid="{{ edition.alias }}" class="group flex cursor-default items-center px-4 py-2 select-none focus:outline-hidden aria-selected:bg-primary-600 aria-selected:text-white dark:aria-selected:bg-primary-500">
                    <twig:ux:icon name="ph:folder" class="size-6 flex-none text-gray-400 group-aria-selected:text-white dark:text-gray-500" />
                    <span class="ml-3 flex-auto truncate">{{ edition.name }}</span>
                    <twig:ux:icon name="ph:caret-right" class="ml-3 hidden size-5 flex-none text-gray-400 group-aria-selected:block dark:text-gray-500" />
                </a>
            {% endfor %}
        </div>
    </el-command-group>
{% endif %}

{% if results.participants|default([]) is not empty %}
    <el-command-group hidden aria-labelledby="participants-label">
        {% if page|default(1) == 1 %}
            <h2 id="participants-label" class="text-xs font-semibold text-gray-900 dark:text-white">Teilnehmende</h2>
        {% endif %}
        <div class="-mx-4 mt-2 text-sm text-gray-700 dark:text-gray-300">
            {% for participant in results.participants %}
                <a id="participant-{{ participant.id }}" href="{{ path('admin_participants_attendances', {uuid: participant.uuid.toBase58}) }}" hidden data-type="user" data-entity-type="participant" data-uuid="{{ participant.uuid }}" class="group flex cursor-default items-center px-4 py-2 select-none focus:outline-hidden aria-selected:bg-primary-600 aria-selected:text-white dark:aria-selected:bg-primary-500">
                    <twig:ux:icon name="ph:users" class="size-6 flex-none text-gray-400 group-aria-selected:text-white dark:text-gray-500" />
                    <span class="ml-3 flex-auto truncate">{{ participant.firstname }} {{ participant.lastname }}</span>
                    <twig:ux:icon name="ph:caret-right" class="ml-3 hidden size-5 flex-none text-gray-400 group-aria-selected:block dark:text-gray-500" />
                </a>
            {% endfor %}
        </div>
    </el-command-group>
{% endif %}

{% if results.users|default([]) is not empty %}
    <el-command-group hidden aria-labelledby="users-label">
        {% if page|default(1) == 1 %}
            <h2 id="users-label" class="text-xs font-semibold text-gray-900 dark:text-white">Benutzerkonten</h2>
        {% endif %}
        <div class="-mx-4 mt-2 text-sm text-gray-700 dark:text-gray-300">
            {% for user in results.users %}
                <a id="user-{{ user.id }}" href="{{ path('admin_accounts_show', {uuid: user.uuid.toBase58}) }}" hidden data-type="user" data-entity-type="user" data-uuid="{{ user.uuid }}" class="group flex cursor-default items-center px-4 py-2 select-none focus:outline-hidden aria-selected:bg-primary-600 aria-selected:text-white dark:aria-selected:bg-primary-500">
                    <twig:ux:icon name="ph:user-circle" class="size-6 flex-none text-gray-400 group-aria-selected:text-white dark:text-gray-500" />
                    <span class="ml-3 flex-auto truncate">{{ user.firstname }} {{ user.lastname }}</span>
                    <twig:ux:icon name="ph:caret-right" class="ml-3 hidden size-5 flex-none text-gray-400 group-aria-selected:block dark:text-gray-500" />
                </a>
            {% endfor %}
        </div>
    </el-command-group>
{% endif %}
{% if results.hosts|default([]) is not empty %}
    <el-command-group hidden aria-labelledby="hosts-label">
        {% if page|default(1) == 1 %}
            <h2 id="hosts-label" class="text-xs font-semibold text-gray-900 dark:text-white">Veranstaltende</h2>
        {% endif %}
        <div class="-mx-4 mt-2 text-sm text-gray-700 dark:text-gray-300">
            {% for host in results.hosts %}
                <a id="host-{{ host.id }}" href="{{ path('admin_hosts_show', {uuid: host.uuid.toBase58}) }}" hidden data-type="host" data-entity-type="host" data-uuid="{{ host.uuid }}" class="group flex cursor-default items-center px-4 py-2 select-none focus:outline-hidden aria-selected:bg-primary-600 aria-selected:text-white dark:aria-selected:bg-primary-500">
                    <twig:ux:icon name="ph:buildings" class="size-6 flex-none text-gray-400 group-aria-selected:text-white dark:text-gray-500" />
                    <span class="ml-3 flex-auto truncate">{{ host.name }}</span>
                    <twig:ux:icon name="ph:caret-right" class="ml-3 hidden size-5 flex-none text-gray-400 group-aria-selected:block dark:text-gray-500" />
                </a>
            {% endfor %}
        </div>
    </el-command-group>
{% endif %}

{% if results.payments|default([]) is not empty %}
    <el-command-group hidden aria-labelledby="payments-label">
        {% if page|default(1) == 1 %}
            <h2 id="payments-label" class="text-xs font-semibold text-gray-900 dark:text-white">Belege</h2>
        {% endif %}
        <div class="-mx-4 mt-2 text-sm text-gray-700 dark:text-gray-300">
            {% for payment in results.payments %}
                <a id="payment-{{ payment.id }}" href="{{ path('admin_payments_receipt', { uuid: payment.uuid.toBase58 }) }}" hidden data-type="payment" data-entity-type="payment" data-id="{{ payment.id }}" class="group flex cursor-default items-center px-4 py-2 select-none focus:outline-hidden aria-selected:bg-primary-600 aria-selected:text-white dark:aria-selected:bg-primary-500">
                    <twig:ux:icon name="ph:currency-dollar" class="size-6 flex-none text-gray-400 group-aria-selected:text-white dark:text-gray-500" />
                    <span class="ml-3 flex-auto truncate">{{ payment.receiptNumber|default('Beleg #' ~ payment.id) }} <span class="text-gray-400 dark:text-gray-500">{{ ((payment.totalAmount|default(0))/100)|format_currency('EUR', locale='de') }}</span></span>
                    <twig:ux:icon name="ph:caret-right" class="ml-3 hidden size-5 flex-none text-gray-400 group-aria-selected:block dark:text-gray-500" />
                </a>
            {% endfor %}
        </div>
    </el-command-group>
{% endif %}
</div>

<div data-previews-list>
{% for offer in results.offers|default([]) %}
    <el-command-preview hidden for="offer-{{ offer.id }}" class="h-96 w-1/2 flex-none flex-col divide-y divide-gray-100 overflow-y-auto hidden sm:flex dark:divide-white/10">
        {{ include('@FerienpassAdmin/search/preview/offer.html.twig', {item: offer}) }}
    </el-command-preview>
{% endfor %}
{% for edition in results.editions|default([]) %}
    <el-command-preview hidden for="edition-{{ edition.id }}" class="h-96 w-1/2 flex-none flex-col divide-y divide-gray-100 overflow-y-auto hidden sm:flex dark:divide-white/10">
        {{ include('@FerienpassAdmin/search/preview/edition.html.twig', {item: edition}) }}
    </el-command-preview>
{% endfor %}
{% for participant in results.participants|default([]) %}
    <el-command-preview hidden for="participant-{{ participant.id }}" class="h-96 w-1/2 flex-none flex-col divide-y divide-gray-100 overflow-y-auto hidden sm:flex dark:divide-white/10">
        {{ include('@FerienpassAdmin/search/preview/participant.html.twig', {item: participant}) }}
    </el-command-preview>
{% endfor %}
{% for user in results.users|default([]) %}
    <el-command-preview hidden for="user-{{ user.id }}" class="h-96 w-1/2 flex-none flex-col divide-y divide-gray-100 overflow-y-auto hidden sm:flex dark:divide-white/10">
        {{ include('@FerienpassAdmin/search/preview/user.html.twig', {item: user}) }}
    </el-command-preview>
{% endfor %}
{% for host in results.hosts|default([]) %}
    <el-command-preview hidden for="host-{{ host.id }}" class="h-96 w-1/2 flex-none flex-col divide-y divide-gray-100 overflow-y-auto hidden sm:flex dark:divide-white/10">
        {{ include('@FerienpassAdmin/search/preview/host.html.twig', {item: host}) }}
    </el-command-preview>
{% endfor %}
{% for payment in results.payments|default([]) %}
    <el-command-preview hidden for="payment-{{ payment.id }}" class="h-96 w-1/2 flex-none flex-col divide-y divide-gray-100 overflow-y-auto hidden sm:flex dark:divide-white/10">
        {{ include('@FerienpassAdmin/search/preview/payment.html.twig', {item: payment}) }}
    </el-command-preview>
{% endfor %}
</div>
