{% trans_default_domain 'admin' %}
{% macro offer_menu(offer, component) %}
    <div class="px-4 py-3">
        <p class="text-xs font-semibold text-gray-700 dark:text-gray-400">
            {{ offer.name }}
            {% if (offer.isVariant|default or offer.hasVariants) and offer.variantNumber is defined %}
                {{ component("Admin:Badge", { color: offer.isVariantBase ? "yellow" : "gray", class: "ml-1", content: offer.variantNumber|default("") }) }}
            {% endif %}
        </p>
        {% if offer.hosts %}
            <p class="text-xs text-gray-700 dark:text-gray-400 mb-2 truncate">{{ offer.hosts|map(h => h.name)|join(', ') }}</p>
        {% endif %}
    </div>

    {% set menu = component.getMenu(offer) %}
    {% set sections = menu.children|filter(i => i.isDisplayed)|map(i => i.extra('section', 'default'))|reduce((unique, section) => section in unique ? unique : unique|merge([section]), []) %}
    {% for section in sections %}
        <div class="border-t border-gray-100 dark:border-white/10 py-1">
            {% for item in menu.children|filter(i => i.isDisplayed and i.extra('section', 'default') == section) %}
                {% set itemAttrs = item.extra('attr', {})|merge(item.linkAttributes|default([])) %}
                {% component 'Admin:DropdownItem' with { 
                    href: item.uri, 
                    attributes: itemAttrs,
                    method: item.extra('method', 'get'),
                } %}
                    {% block content %}
                        {% trans_default_domain 'admin' %}
                        {% if item.extra('icon') %}
                            <span class="mr-2 size-4 flex-shrink-0">
                                {{ ux_icon('ph:' ~ item.extra('icon')) }}
                            </span>
                        {% endif %}
                        <span class="text-left leading-tight">{{ item.label|trans(item.extra('translation_params', {}), item.extra('translation_domain', 'admin')) }}</span>
                    {% endblock %}
                {% endcomponent %}
            {% endfor %}
        </div>
    {% endfor %}
{% endmacro %}


<div {{ attributes.defaults(stimulus_controller('ferienpass/admin-offers-assign')) }} class="flex max-h-screen space-x-6">

    <div class="flex-1 rounded border border-gray-200 dark:border-gray-800 overflow-hidden lg:flex">
        <section aria-labelledby="message-heading"
                 class="flex h-full min-w-0 flex-1 flex-col overflow-hidden lg:order-last">

            <div class="flex-shrink-0 border-b border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900">

                {% if offer is not null %}
                    {% component 'Admin:Offer:SummaryHeader' with {
                        offer: offer,
                        menu: this.getMenu(offer)
                    } %}
                        {% block attributes %}
                            {{ attributes.defaults({'data-action': 'contextmenu->ferienpass--admin-offers-assign#showContextMenu'}) }}
                        {% endblock %}
                    {% endcomponent %}
                {% endif %}
            </div>

            {% if offer is not null %}
                <div class="min-h-0 flex-1 overflow-y-auto">
                    {% component 'Admin:OfferAssign' with { offer: offer, participant: participant } %}{% endcomponent %}
                </div>
            {% else %}
                <div class="text-center py-12">
                    <span class="mx-auto h-12 w-12 text-gray-400" aria-hidden="true">{{ ux_icon('ph:folder-open') }}</span>
                    <h3 class="mt-2 text-sm font-semibold text-gray-900 dark:text-white">Teilnahmeliste</h3>
                    <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Wählen Sie ein Angebot zum Anzeigen aus.</p>
                </div>

            {% endif %}
        </section>

        <aside class="hidden lg:order-first lg:block lg:flex-shrink-0">
            <div class="relative flex h-full w-80 flex-col border-r border-gray-200 dark:border-gray-800 bg-gray-100 dark:bg-gray-950/20">
                <div class="flex-shrink-0">
                    <div class="flex h-16 flex-col justify-center bg-white dark:bg-gray-900 px-6">
                        <div class="flex items-baseline space-x-3">
                            <h2 class="text-lg font-medium text-gray-900 dark:text-white">{{ 'offers.title'|trans }}</h2>
                            <p class="text-sm font-medium text-gray-500 dark:text-gray-400">{{ offers|length }} Angebote</p>
                        </div>
                    </div>
                    <div class="border-b border-t border-gray-200 dark:border-gray-800 bg-gray-50 dark:bg-gray-900 px-5 py-2">
                        <div>
                            <label for="search" class="sr-only">Nachrichten durchsuchen</label>
                            <div class="relative">
                                <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
                                    <span class="h-5 w-5 text-gray-400">
                                        {{ ux_icon('ph:magnifying-glass') }}
                                    </span>
                                </div>
                                <input type="search"
                                       data-model="query"
                                       name="search"
                                       id="search"
                                       class="block w-full py-1 pl-10 sm:text-sm sm:leading-6 dark:bg-gray-800 dark:text-gray-100 dark:ring-gray-700"
                                       placeholder="Suchen…">
                            </div>
                        </div>
                    </div>
                </div>
                <nav aria-label="Angebote" class="min-h-0 flex-1 overflow-y-auto">
                    <ul role="list" class="divide-y divide-gray-200 dark:divide-gray-800 border-b border-gray-200 dark:border-gray-800">
                        {% for item in offers %}
                            <li id="{{ "item-#{item.id}" }}"
                                class="relative px-6 py-5 {{ item.id == offer.id|default ? ((item.attendancesWaiting|length or (item.maxParticipants and item.attendancesConfirmed|length < item.maxParticipants and item.attendancesWaitlisted|length)) ? 'bg-gray-100/75 dark:bg-gray-800/75' : 'bg-green-100/60 dark:bg-green-900/40') : ((item.attendancesWaiting|length or (item.maxParticipants and item.attendancesConfirmed|length < item.maxParticipants and item.attendancesWaitlisted|length)) ? 'bg-white dark:bg-gray-900 hover:bg-gray-50 dark:hover:bg-gray-800' : 'bg-green-50 dark:bg-green-900/20 hover:bg-green-100/50 dark:hover:bg-green-900/30') }} focus-within:ring-2 focus-within:ring-inset focus-within:ring-blue-600"
                                data-action="contextmenu->ferienpass--admin-offers-assign#showContextMenu">
                                <div>
                                            <a class="block focus:outline-none"
                                               data-action="live#emit:prevent"
                                               data-live-event-param="open"
                                               data-live-offer-param="{{ item.id }}">
                                                <span class="absolute inset-0" aria-hidden="true"></span>
                                                <p class="truncate text-sm font-medium text-gray-900 dark:text-gray-100 flex items-center gap-1 {{ item.cancelled ? 'line-through' : '' }}">
                                                    {{ include("@FerienpassAdmin/page/offers/_status_icon.html.twig", { offer: item }) }}
                                                    {{ item.name }}
                                                    {% if (item.isVariant|default or item.hasVariants) and item.variantNumber is defined %}
                                                        {{ component("Admin:Badge", { color: item.isVariantBase ? "yellow" : "gray", class: "ml-1", content: item.variantNumber|default("") }) }}
                                                    {% endif %}
                                                </p>

                                            </a>
                                    <p class="truncate text-sm text-gray-500">
                                        {% if item.dates is not empty %}
                                            {% set startDate = item.dates|first.begin %}
                                            {% if startDate %}
                                                <time datetime="{{ startDate|date('c') }}">{{ startDate|format_datetime(pattern="E, dd.MM.yyyy HH:mm") }}</time>
                                            {% else %}
                                                <span class="inline-flex items-center text-orange-600">
                                                    {{ ux_icon('ph:warning', {class: 'mr-1 size-4'}) }}
                                                    <span>Termin fehlt</span>
                                                </span>
                                            {% endif %}
                                        {% else %}
                                            <span>Dauerangebot</span>
                                        {% endif %}
                                    </p>
                                </div>
                                <div class="mt-1 flex items-center gap-x-2 text-xs leading-5 text-gray-500 dark:text-gray-100/40">

                                    <p class="flex items-center space-x-1" title="aktuelle Anmeldungen">
                                        <span class="{{ (item.maxParticipants and item.attendancesConfirmed|length >= item.maxParticipants) ? 'text-red-700' : 'text-green-700' }}">
                                            <svg viewBox="0 0 2 2" class="h-2 w-2 fill-current">
                                                <circle cx="1" cy="1" r="1"/>
                                            </svg>
                                        </span>
                                        <span>
                                            {{ item.attendancesWithStatuses(["confirmed", "waiting"])|length ~ ' / ' ~ (item.maxParticipants ?: '∞') ~ '' }}
                                        </span>
                                        {% if ((item.attendancesWithStatus('unfulfilled')|length and item.maxParticipants and item.attendancesConfirmed|length < item.maxParticipants) or item.attendancesWaiting|length or (item.maxParticipants and item.attendancesConfirmed|length < item.maxParticipants and item.attendancesWaitlisted|length)) and not item.cancelled %}
                                            <span title="nicht-zugeteilte Teilnehmende"
                                                  class="mt-0.5 text-orange-600 w-4 h-4">{{ ux_icon('ph:warning') }}</span>
                                        {% endif %}
                                    </p>

                                    {# Conditional column: only shown for offers with anonymous applications
                                       still awaiting e-mail confirmation. #}
                                    {% set unconfirmed = item.attendancesWithStatus('email_unconfirmed')|length %}
                                    {% if unconfirmed %}
                                        <svg viewBox="0 0 2 2" class="h-0.5 w-0.5 fill-current">
                                            <circle cx="1" cy="1" r="1"/>
                                        </svg>
                                        <p>
                                            <span class="flex items-center gap-x-1 text-amber-600" title="{{ unconfirmed }} Anmeldung(en) mit ausstehender E-Mail-Bestätigung">
                                                <span class="h-5 w-5" aria-hidden="true">{{ ux_icon('ph:envelope-simple') }}</span>
                                                <span class="text-xs leading-6">{{ unconfirmed }}</span>
                                            </span>
                                        </p>
                                    {% endif %}

                                    <svg viewBox="0 0 2 2" class="h-0.5 w-0.5 fill-current">
                                        <circle cx="1" cy="1" r="1"/>
                                    </svg>

                                    <p>
                                        <span class="flex items-center gap-x-1" title="Kommentare / Aktivität">
                                            <span class="h-5 w-5 text-gray-400" aria-hidden="true">{{ ux_icon('ph:chat-dots') }}</span>
                                            <span class="text-xs leading-6">{{ item.comments|length }}</span>
                                        </span>

                                    </p>

                                    <svg viewBox="0 0 2 2" class="h-0.5 w-0.5 fill-current">
                                        <circle cx="1" cy="1" r="1"/>
                                    </svg>

                                    <p>{{ 'numberOfDateVariants'|trans({n: item.variants(true)|length}) }}</p>
                                </div>
                                <div class="hidden">
                                    {% set parent = this %}
                                            {% component 'Admin:Dropdown' %}
                                                {% block dropdown %}
                                                    {% import '@FerienpassAdmin/components/OffersAssign.html.twig' as macros %}
                                                    {{ macros.offer_menu(item, parent) }}
                                                {% endblock %}
                                            {% endcomponent %}
                                </div>
                            </li>
                        {% endfor %}
                    </ul>

                </nav>
            </div>
        </aside>
    </div>

    <div class="w-80 relative overflow-hidden">

        <div class="flex h-full flex-col ">
            <div class="flex-shrink-0 py-4 px-2">
                <h2 class="text-lg font-medium text-gray-900 dark:text-white">{{ 'participants.title'|trans }}

                    {% if offer is null %}
                        <span class="font-normal text-gray-500 dark:text-gray-400">(alle)</span>
                    {% else %}
                        <span class="font-normal text-gray-500 dark:text-gray-400">(vom Angebot)</span>
                    {% endif %}

                </h2>
            </div>

            <div class="min-h-0 flex-1 overflow-y-auto space-y-2">

                {% for item in participants %}
                    {% set isNotPreferred = preferredPostalCodes is not empty and item.postalCode not in preferredPostalCodes %}

                    <button class="group text-left w-full {{ participant is not null and participant.id == item.id ? 'bg-gray-200/60 dark:bg-gray-800/60': (participant is not null ? 'opacity-50 hover:opacity-95' : (isNotPreferred ? 'bg-orange-50 dark:bg-orange-900/20 hover:bg-orange-100 dark:hover:bg-orange-900/30' : 'hover:bg-gray-100 dark:hover:bg-gray-900')) }} rounded px-3 py-2"
                            data-action="live#emit:self"
                            data-live-event-param="selectParticipant"
                            data-live-participant-param="{{ item.id }}"
                    >

                        <div class="pointer-events-none text-sm">
                            <h4 class="font-medium text-gray-900 dark:text-gray-100">
                                {{ item.name }}

                                    {% if offer is not null %}
                                        {% set attendance = item.attendances|filter(a => a.offer.id == offer.id)|first %}
                                        {% if attendance %}
                                            {{ component("Admin:Badge", { attendance: attendance.status, size: "xs", class: "ml-1" }) }}
                                        {% endif %}
                                    {% endif %}
                            </h4>
                            {% set firstDate = offer is not null ? offer.dates|first : null %}
                            {% set startDate = firstDate ? firstDate.begin : null %}
                            {% set age = item.age(startDate) %}
                            <p class="text-xs text-gray-500 dark:text-gray-400">{{ item.dateOfBirth|date('d.m.Y') }} {{ "(#{age} Jahre)" }}</p>
                            {% if showPostalCode %}
                                <p class="text-xs text-gray-500 dark:text-gray-400">PLZ {{ item.postalCode }}</p>
                            {% endif %}
                        </div>

                        <a href="{{ path("admin_participants_show", { uuid: item.uuid.toBase58 }) }}"
                           class="inline-block hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-gray-100 rounded-md px-1 py-0.5 -mx-1 -my-0.5 transition-colors"
                           data-turbo-frame="slideover">
                            <span class="flex items-center gap-x-1" title="Kommentare / Aktivität">
                                <span class="h-5 w-5 text-gray-400" aria-hidden="true">{{ ux_icon('ph:chat-dots') }}</span>
                                <span class="text-xs leading-6 text-gray-700 dark:text-gray-300">{{ item.comments|length }}
                                    Kommentare</span>
                            </span>
                        </a>

                        <div class="pointer-events-none mt-2">
                            <div class="flex items-center space-x-2">
                                {% set allAttendances = item.getAttendancesNotWithdrawn(edition, false) %}
                                {% if allAttendances|filter(i => i.confirmed)|length %}
                                    <span class="text-green-600 font-medium text-xs">{{ allAttendances|filter(i => i.confirmed)|length }}</span>
                                {% else %}
                                    <span class="text-gray-500 font-medium text-xs">0</span>
                                {% endif %}
                                <div class="w-full bg-gray-200 dark:bg-gray-200/50 rounded-full h-1.5 overflow-hidden flex"
                                     style="width: {{ (allAttendances|length/maxApplications)*100 }}%">
                                    {% if allAttendances|length %}
                                        <div class="bg-green-600 dark:bg-green-600/70 h-1.5"
                                             title="zugelassen: {{allAttendances|filter(i => i.confirmed)|length }}"
                                             style="width: {{ (item.attendancesConfirmed(false)|length)/item.attendancesNotWithdrawn(null, false)|length*100 }}%"></div>
                                        <div class="bg-yellow-500 dark:bg-yellow-500/70 h-1.5"
                                             title="Warteliste: {{ allAttendances|filter(i => i.waitlisted)|length }}"
                                             style="width: {{ (item.attendancesWaitlisted(false)|length)/item.attendancesNotWithdrawn(null, false)|length*100 }}%"></div>
                                        <div class="bg-red-600 dark:bg-red-600/70 h-1.5"
                                             title="fehlerhaft: {{ allAttendances|filter(i => i.rejected)|length }}"
                                             style="width: {{ (item.attendancesRejected|length)/item.attendancesNotWithdrawn(null, false)|length*100 }}%"></div>
                                        <div class="bg-red-600 dark:bg-red-600/70 h-1.5"
                                             title="ohne Platz: {{ allAttendances|filter(i => i.unfulfilled)|length }}"
                                             style="width: {{ (item.attendancesUnfulfilled|length)/item.attendancesNotWithdrawn(null, false)|length*100 }}%"></div>
                                        <div class="bg-gray-600 dark:bg-gray-100/70 h-1.5"
                                             title="wartend: {{ allAttendances|filter(i => i.waiting)|length }}"
                                             style="width: {{ (item.attendancesWaiting(false)|length)/item.attendancesNotWithdrawn(null, false)|length*100 }}%"></div>
                                    {% endif %}
                                </div>
                                <span class="text-gray-500 font-medium text-xs">{{ allAttendances|length }}</span>
                            </div>
                        </div>

                                {% if offer is not null %}
                                    {% set attendance = item.attendances|filter((a) => a.offer.id == offer.id)|first %}
                                    {% if attendance %}
                                        <h5 class="mt-2 text-xs text-gray-700 dark:text-gray-300 font-medium">Priorität:</h5>
                                        <div class="flex items-center space-x-1">
                                            <p class="mt-0.5">
                                                <span class="sr-only">Priorität {{ attendance.userPriority }}</span>
                                                <span aria-hidden="true" class="flex items-center -ml-1">
                                                    {% for i in attendance.task.maxApplications|default(0)..1 %}
                                                        {% if attendance.userPriority > i %}
                                                            <span class="block h-4 w-4 text-gray-300">{{ source('@FerienpassCore/Icons/star-solid.svg') }}</span>
                                                        {% else %}
                                                            <span class="block h-4 w-4 text-yellow-500">{{ source('@FerienpassCore/Icons/star-solid.svg') }}</span>
                                                        {% endif %}
                                                    {% endfor %}
                                                </span>
                                            </p>
                                        </div>
                                    {% endif %}
                                {% endif %}

                        {% if participant is not null and participant.id == item.id %}
                            {% if offer is not null %}
                                {% set attendance_for_offer = item.attendances|filter((a) => a.offer.id == offer.id)|first %}
                                {% if attendance_for_offer %}
                                    {% set activity = attendance_for_offer.activity|filter(a => 'create' == a.transition.name)|first %}
                                    {% if activity %}
                                        <div class="mt-2 leading-4">
                                            <h5 class="inline text-xs text-gray-700 dark:text-gray-300 font-medium">Anmeldung:</h5>
                                            <span class="text-xs text-gray-500 dark:text-gray-400">
                                                {{ activity.createdAt|ago }}
                                            </span>
                                            <p class="text-xs text-gray-500 dark:text-gray-400"><a href="{{ path('admin_accounts_show', {uuid: activity.createdBy.uuid.toBase58}) }}" data-turbo-frame="slideover" class="hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-gray-100 rounded-md px-1 py-0.5 -mx-1 -my-0.5 transition-colors">{{ activity.createdBy.name }}</a></p>
                                        </div>
                                    {% endif %}
                                {% endif %}
                            {% endif %}
                            <h5 class="mt-2 text-xs text-gray-700 dark:text-gray-300 font-medium">{{ offer is not null ? 'Andere ':'' }}
                                Anmeldungen:</h5>
                            <ul class="text-gray-700 dark:text-gray-300">
                                {% set atts = item.getAttendancesNotWithdrawn(edition) %}
                                {% set atts = offer is not null ? atts|filter((a) => a.offer.id != offer.id) : atts %}
                                {% for a in atts|sort((a, b) => a.status <=> b.status) %}
                                    <li class="text-xs leading-4 {{ a.status == 'confirmed' ? 'text-green-700' : (a.status == 'waitlisted' or a.status == 'unfulfilled' ? 'text-red-700' : 'text-gray-500') }}">
                                        <a href="#"
                                           class="flex items-center space-x-1 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-gray-100 rounded-md px-1 py-0.5 -mx-1 -my-0.5 transition-colors {{ a.offer.cancelled ? 'line-through' : '' }}"
                                           data-action="live#emit:prevent"
                                           data-live-event-param="open"
                                           data-live-offer-param="{{ a.offer.id }}">

                                            {% if a.status == 'confirmed' %}
                                                <span class="w-4 h-4">
                                                    {{ ux_icon('ph:check') }}
                                                </span>
                                            {% elseif a.status == 'waitlisted' or a.status == 'unfulfilled' %}
                                                <span class="w-4 h-4">
                                                    {{ ux_icon('ph:x') }}
                                                </span>
                                            {% elseif a.status == 'waiting' %}
                                                <span class="w-4 h-4">
                                                    {{ ux_icon('ph:arrow-clockwise') }}
                                                </span>
                                            {% endif %}

                                            <span class="flex-1">
                                                {{ a.offer.name }}
                                            </span>

                                            {% if offer is not null and offer.variants|filter(v => v.id == a.offer.id)|length %}
                                                <span title="Ist Alternativtermin, bite nur einen Termin zusagen und andere abmelden"
                                                      class="mt-0.5 text-orange-600 w-4 h-4">{{ ux_icon('ph:warning') }}</span>
                                            {% endif %}

                                        </a>
                                    </li>
                                {% else %}
                                    <li class="leading-4 text-xs ">./.</li>
                                {% endfor %}
                            </ul>
                        {% endif %}

                    </button>

                {% endfor %}

            </div>
        </div>
    </div>

</div>
