{% trans_default_domain 'admin' %}

{# tw !bg-blue-100 #}

{% macro column(status, offer, participant, attendances, autoCommit = false, max = null, preferredPostalCodes = []) %}
    {% trans_default_domain 'admin' %}
    <div {{ stimulus_target('ferienpass/admin-offer-assign', status~'Column') }}
            class="@container bg-white dark:bg-gray-900 dark:border dark:border-gray-800 border-t border-b border-gray-200 first:border-t-0 last:border-b-0 @xl:border-t-0 @xl:border-b-0 overflow-hidden @xl:shadow dark:shadow-none @xl:rounded-lg"
    >
        <div class="border-b border-gray-200 dark:border-gray-800 px-4 py-5 sm:px-6">
            <div class="@sm:flex @sm:justify-between">
                <div>
                    <div class="flex space-x-2">
                        <h3 class="text-lg leading-6 font-medium">
                            <twig:Admin:Badge attendance="{{ status }}" size="base" class="-ml-2.5 @sm:ml-0" />
                        </h3>
                        <div class="flex items-center">
                            {% if max is null %}
                                <span class="ml-auto inline-block py-0.5 px-3 text-gray-600 dark:text-gray-100/50 text-xs leading-4 rounded-full bg-gray-100 dark:bg-gray-800/50 font-normal">{{ attendances|length }}</span>
                            {% endif %}
                        </div>
                    </div>
                    <p class="@sm:hidden mt-2 text-xs leading-4 text-gray-500 dark:text-gray-300">{{ ('statusDescription.'~status)|trans }}</p>
                </div>
                <div>
                    {% if status == 'waiting' and attendances|length > 0 %}
                        <div class="mt-4 @sm:mt-0 flex items-center space-x-2">
                            <button
                                    data-action="live#action:prevent"
                                    data-live-action-param="confirmAllWaiting"
                                    class="rounded-md cursor-pointer shadow-sm inline-flex items-center px-2 py-1.5 border border-gray-300 dark:border-gray-700 text-xs leading-4 font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 hover:text-gray-500 dark:hover:text-gray-100 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:text-gray-800 active:bg-gray-50 transition ease-in-out duration-150">
                                <span class="-ml-0.5 mr-1 h-4 w-4"><twig:ux:icon name="ph:check" /></span>
                                <span class="flex-1">
                                    {{ 'attendance.action.confirmAllWaiting'|trans }}
                                </span>
                            </button>
                            <button
                                    data-action="live#action:prevent"
                                    data-live-action-param="waitlistAllWaiting"
                                    class="rounded-md cursor-pointer shadow-sm inline-flex items-center px-2 py-1.5 border border-gray-300 dark:border-gray-700 text-xs leading-4 font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 hover:text-gray-500 dark:hover:text-gray-100 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:text-gray-800 active:bg-gray-50 transition ease-in-out duration-150">
                                <span class="-ml-0.5 mr-1 h-4 w-4">
                                    <twig:ux:icon name="ph:arrow-circle-down" />
                                </span>
                                <span class="flex-1">
                                    {{ 'attendance.action.waitlistAllWaiting'|trans }}
                                </span>
                            </button>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
        {% if max is not null %}
            <div class="px-4 border-b border-t -mt-px py-2 sm:px-6 {% if max is not null and attendances|length > max %}bg-yellow-50 border-orange-200{% else %}bg-gray-50 dark:bg-gray-900 border-gray-200 dark:border-gray-800{% endif %}">
                <p class="leading-5 {% if max is not null and attendances|length > max %}text-orange-700{% else %}text-gray-700 dark:text-gray-300{% endif %}"
                >
                    <span class="inline-block py-0.5 px-3 mr-1 -ml-2 text-xs leading-4 rounded-full font-medium {% if attendances|length > max %}bg-yellow-200 text-orange-700{% else %} bg-gray-200 text-gray-600{% endif %}"
                    >{{ attendances|length }}</span>von {% if max %}{{ max }} Kindern{% else %}∞{% endif %}
                </p>
            </div>
        {% endif %}
        {% set numberOfDateVariants = offer.variants(true)|length %}
        <div class="px-4 @sm:px-6 py-5 sm:py-6">
            <ul data-attendance-status="{{ status }}">
                {% for attendance in attendances %}


                    {% set isNotPreferred = preferredPostalCodes is not empty and attendance.participant and attendance.participant.postalCode not in preferredPostalCodes %}
                    <li class="{{ participant.id|default == attendance.participant.id|default ? 'ring-2 ring-offset-2 ring-primary-600' : '' }} {{ isNotPreferred ? 'bg-orange-50 dark:bg-orange-950/20' : 'bg-gray-50 dark:bg-gray-100/5' }} group cursor-move px-2 py-2 border border-transparent rounded mb-4 hover:bg-gray-100 dark:hover:bg-primary-100/10 hover:border-gray-100 dark:hover:border-gray-800"
                        data-attendance-id="{{ attendance.id }}"
                        data-participant-id="{{ attendance.participant.id|default(0) }}"
                        data-action="contextmenu->ferienpass--admin-offer-assign#showContextMenu"
                        id="{{ 'aa-'~attendance.id }}">
                        <div class="absolute inset-0 pointer-events-none overflow-hidden">
                            <twig:Admin:Dropdown dropdownClass="w-56 pointer-events-auto">
                                {% trans_default_domain 'admin' %}
                                <twig:block name="toggle"></twig:block>
                                <twig:block name="dropdown">
                                    {% if attendance.participant and is_granted('view', attendance.participant) %}
                                        <div class="py-1">
                                            <twig:Admin:DropdownItem href="{{ path('admin_participants_show', { uuid: attendance.participant.uuid.toBase58 }) }}" data-turbo-frame="slideover">
                                                {% trans_default_domain 'admin' %}
                                                <span class="mr-2 size-4 flex-shrink-0">
                                                    {{ ux_icon('ph:user-square') }}
                                                </span>
                                                <span class="text-left leading-tight">{{ 'attendance.action.participant'|trans }}</span>
                                            </twig:Admin:DropdownItem>
                                        </div>
                                    {% endif %}

                                    {% set transitions = ['confirm', 'waitlist', 'withdraw'] %}
                                    {% if not autoCommit %}
                                        {% set transitions = transitions|merge(['unfulfill']) %}
                                    {% endif %}

                                    {% set icons = {
                                        'confirm': 'check-circle-fill',
                                        'waitlist': 'arrow-circle-down',
                                        'withdraw': 'x-circle-fill',
                                        'unfulfill': 'x-circle-fill',
                                        'reject': 'prohibit',
                                        'reset': 'arrows-counter-clockwise',
                                    } %}

                                    {% set colors = {
                                        'confirm': 'text-green-600 dark:text-green-400 group-hover:text-green-700 dark:group-hover:text-green-300',
                                        'waitlist': 'text-yellow-600 dark:text-yellow-400 group-hover:text-yellow-700 dark:group-hover:text-yellow-300',
                                        'withdraw': 'text-red-600 dark:text-red-400 group-hover:text-red-700 dark:group-hover:text-red-300',
                                        'unfulfill': 'text-gray-600 dark:text-gray-400 group-hover:text-gray-700 dark:group-hover:text-gray-200',
                                    } %}

                                    <div class="border-t border-gray-100 dark:border-white/10 py-1">
                                        {% for transition in transitions %}
                                            {% if workflow_can(attendance, transition) %}
                                                <twig:Admin:DropdownItem
                                                    data-action="live#action:prevent"
                                                    data-live-action-param="change"
                                                    :data-live-attendance-param="attendance.id"
                                                    :data-live-transition-param="transition"
                                                >
                                                    {% trans_default_domain 'admin' %}
                                                    <span class="mr-2 size-4 flex-shrink-0 {{ colors[transition]|default('') }}">
                                                        {{ ux_icon('ph:' ~ icons[transition]|default('flag')) }}
                                                    </span>
                                                    <span class="text-left leading-tight {{ colors[transition]|default('') }}">{{ ('attendance.transition.' ~ transition)|trans }}</span>
                                                </twig:Admin:DropdownItem>
                                            {% endif %}
                                        {% endfor %}
                                    </div>
                                </twig:block>
                            </twig:Admin:Dropdown>
                        </div>
                        <div class="flex @container">
                            <div class="mr-2">
                                <twig:ux:icon name="ph:dots-six-vertical-bold" class="h-5 w-5 block -ml-1 text-gray-400 dark:text-gray-800 group-hover:text-gray-500 dark:group-hover:text-gray-900"/>
                            </div>

                            <div class="flex-1 @xs:flex @xs:gap-2">
                                <div class="@xs:flex-1 flex flex-col">
                                    {% if not attendance.participant %}
                                        <span class="font-medium block text-sm text-gray-700 truncate">{{ 'attendance.action.deletedParticipant'|trans }}</span>
                                    {% else %}
                                        <div class="flex items-center gap-x-2">
                                            <span class="-mt-1 font-medium flex items-center space-x-3 text-sm text-gray-700 dark:text-gray-300 overflow-hidden">
                                                <span class="truncate">
                                                    {{ attendance.participant.name }}
                                                </span>
                                                <a href="{{ path('admin_participants_show', { uuid: attendance.participant.uuid.toBase58, kommentare: 1 }) }}"
                                                   data-turbo-frame="slideover"
                                                   class="flex items-center gap-x-1 hover:bg-gray-200/75 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-gray-100 rounded px-1 -mx-1 transition-colors"
                                                   title="Kommentare / Aktivität">
                                                    <twig:ux:icon name="ph:chat-dots" class="h-4 w-4 text-gray-400" aria-hidden="true" />
                                                    <span class="text-xs leading-6">{{ attendance.participant.comments|length }}</span>
                                                </a>
                                            </span>
                                            {% if attendance.consentOutstanding %}
                                                <div class="flex items-center gap-x-1">
                                                    <span class="inline-flex items-center rounded-md bg-yellow-50 px-2 py-0.5 text-xs font-medium text-yellow-800 ring-1 ring-inset ring-yellow-600/20" title="{{ "consents.consentOutstanding"|trans({}, "admin") }}">
                                                        {{ "consents.consentOutstanding"|trans({}, "admin") }}
                                                    </span>
                                                    <button type="button"
                                                            class="text-gray-400 hover:text-gray-600"
                                                            title="{{ "consents.copyConsentLink"|trans({}, "admin") }}"
                                                            onclick="navigator.clipboard.writeText('{{ url("cms_consent_link", { token: attendance.consentToken }) }}')">
                                                        <twig:ux:icon name="ph:link" class="h-4 w-4" />
                                                    </button>
                                                </div>
                                            {% endif %}
                                        </div>
                                    {% endif %}
                                    {% set firstDate = attendance.offer.dates|first %}
                                    <p class="text-gray-500 leading-4 dark:text-gray-400 text-sm">{{ attendance.participant ? attendance.participant.age(firstDate ? firstDate.begin : null) : attendance.age }}
                                        Jahre
                                    {% if attendance.friendCode %}
                                        <span>
                                            &middot;
                                            {{ attendance.friendCode.code }}
                                        </span>
                                        {% endif %}
                                    </p>
                                    <p class="text-gray-500 leading-4 dark:text-gray-400 text-xs flex items-center">
                                        <span>{{ 'enrolledBefore'|trans({days: date(attendance.createdAt).diff(date()).days}) }}</span>
                                    </p>
                                    {% if numberOfDateVariants > 1 %}
                                        <p class="text-gray-500 leading-4 dark:text-gray-400 text-xs flex items-center">
                                            <span>{{ 'appliedForNofY'|trans({n: attendance.dateVariants|length, y: numberOfDateVariants}) }}.

                                                {% if attendance.dateVariants|length > 1 %}
                                                    Präferiert <span
                                                        class="underline">{{ attendance.allAlternateDates ? 'alle' : 'mind. 1' }}</span> Termin(e)
                                                {% endif %}
                                            </span>
                                        </p>
                                    {% endif %}
                                    {% if attendance.participant %}
                                        <p class="text-gray-500 leading-4 dark:text-gray-400 text-xs">
                                            PLZ {{ attendance.participant.postalCode }}
                                        </p>
                                        <a href="{{ path('admin_participants_show', { uuid: attendance.participant.uuid.toBase58, saison: attendance.offer.edition.alias }) }}"
                                           data-turbo-frame="slideover"
                                           class="text-gray-500 leading-4 dark:text-gray-400 text-xs hover:bg-gray-200/75 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-gray-100 rounded px-1 -mx-1 transition-colors">
                                            {{ 'countOverallApplications'|trans({count: attendance.participant.attendancesNotHidden(attendance.offer.edition)|length}) }}
                                        </a>
                                    {% endif %}

                                    {% if attendance.task and attendance.task.maxApplications %}
                                        <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..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>
                                    {% endif %}
                                </div>

                                <div class="mt-2 @sm:mt-0 flex items-center gap-x-2">
                                    {% if workflow_can(attendance, 'confirm') %}
                                        <button type="button"
                                                title="{{ 'attendance.transition.confirm'|trans }}"
                                                data-action="live#action:prevent"
                                                data-live-action-param="change"
                                                data-live-attendance-param="{{ attendance.id }}"
                                                data-live-transition-param="confirm"
                                                class="flex cursor-pointer rounded bg-white dark:bg-gray-800 px-1 py-1 text-sm font-semibold text-green-600 dark:text-green-400 hover:text-green-700 dark:hover:text-green-300 shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700">
                                            <span class="w-5 h-5">
                                                {{ ux_icon('ph:check-circle-fill') }}
                                            </span>
                                        </button>
                                    {% endif %}
                                    {% if workflow_can(attendance, 'waitlist') %}
                                        <button type="button"
                                                title="{{ 'attendance.transition.waitlist'|trans }}"
                                                data-action="live#action:prevent"
                                                data-live-action-param="change"
                                                data-live-attendance-param="{{ attendance.id }}"
                                                data-live-transition-param="waitlist"
                                                class="flex cursor-pointer rounded bg-white dark:bg-gray-800 px-1 py-1 text-sm font-semibold text-yellow-600 dark:text-yellow-400 hover:text-yellow-700 dark:hover:text-yellow-300 shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700">
                                            <span class="w-5 h-5">
                                                <twig:ux:icon name="ph:arrow-circle-down" />
                                            </span>
                                        </button>
                                    {% endif %}
                                    {% if workflow_can(attendance, 'withdraw') %}
                                        <button type="button"
                                                title="{{ 'attendance.transition.withdraw'|trans }}"
                                                data-action="live#action:prevent"
                                                data-live-action-param="change"
                                                data-live-attendance-param="{{ attendance.id }}"
                                                data-live-transition-param="withdraw"
                                                class="flex cursor-pointer rounded bg-white dark:bg-gray-800 px-1 py-1 text-sm font-semibold text-red-600 dark:text-red-400 hover:text-red-700 dark:hover:text-red-300 shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700">
                                            <span class="w-5 h-5">
                                                {{ ux_icon('ph:x-circle-fill') }}
                                            </span>
                                        </button>
                                    {% endif %}
                                    {% if not autoCommit and workflow_can(attendance, 'unfulfill') %}
                                        <button type="button"
                                                title="{{ 'attendance.transition.unfulfill'|trans }}"
                                                data-action="live#action:prevent"
                                                data-live-action-param="change"
                                                data-live-attendance-param="{{ attendance.id }}"
                                                data-live-transition-param="unfulfill"
                                                class="flex cursor-pointer rounded bg-white dark:bg-gray-800 px-1 py-1 text-sm font-semibold text-gray-600 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700">
                                            <span class="w-5 h-5">
                                                {{ ux_icon('ph:x-circle-fill') }}
                                            </span>
                                        </button>
                                    {% endif %}
                                </div>

                            </div>
                        </div>
                    </li>
                {% endfor %}
            </ul>
            {% if attendances is empty %}
                <p class="text-xs text-center text-gray-500 dark:text-gray-400 italic">{{ 'attendance.action.emptyColumn'|trans }}</p>
            {% endif %}
        </div>
    </div>
{% endmacro column %}

<div {{ attributes.defaults(stimulus_controller('ferienpass/admin-offer-assign')) }} data-action="click->ferienpass--admin-offer-assign#deselect" class="@container">

    {% if offer.cancelled %}
        <div class="mb-6 shadow">
            <twig:Admin:Alert type="error">
                <twig:block name="content">
                    <h3 class="text-sm leading-5 font-medium text-red-800 dark:text-red-200">Angebot abgesagt</h3>
                    <div class="mt-2 text-sm leading-5 text-red-700 dark:text-red-300">
                        Kinder verbleiben auf der Teilnahmeliste für den Fall, dass das Angebot wiederhergestell wird.
                    </div>
                </twig:block>
            </twig:Admin:Alert>
        </div>
    {% endif %}

    {% if not offer.onlineApplication %}
        <div class="bg-white dark:bg-gray-900 overflow-hidden shadow dark:shadow-none @xl:rounded-lg">
            <div class="px-4 py-5 sm:p-6">
                <twig:Admin:Alert type="info">
                    <twig:block name="content">
                        <h3 class="text-sm leading-5 font-medium text-blue-800 dark:text-blue-200">Keine Online-Anmeldungen</h3>
                        <div class="mt-2 text-sm leading-5 text-blue-700 dark:text-blue-300">
                            Die Anmeldungen laufen über den Veranstalter oder es sind keine Anmeldungen notwendig.
                        </div>
                    </twig:block>
                </twig:Admin:Alert>
            </div>
        </div>
    {% else %}
        {% if offer.attendances is empty %}
            <div class="bg-white dark:bg-gray-900 overflow-hidden shadow dark:shadow-none @xl:rounded-lg">
                <div class="px-4 py-5 sm:p-6">
                    <twig:Admin:Alert type="info">
                        <twig:block name="content">
                            <h3 class="text-sm leading-5 font-medium text-blue-800 dark:text-blue-200">Keine Anmeldungen</h3>
                            <div class="mt-2 text-sm leading-5 text-blue-700 dark:text-blue-300">
                                Es haben sich noch keine Kinder zum Angebot angemeldet.
                            </div>
                        </twig:block>
                    </twig:Admin:Alert>
                </div>
            </div>
        {% else %}

            <div class="space-y-4 @xl:space-y-0 @xl:grid @xl:grid-cols-2 @3xl:grid-cols-4 @xl:gap-6">

                {{ _self.column('confirmed', offer, participant, offer.attendances|filter(a => a.confirmed), autoCommit, offer.maxParticipants, preferredPostalCodes) }}

                {{ _self.column('waitlisted', offer, participant, offer.attendances|filter(a => a.waitlisted), autoCommit, null, preferredPostalCodes) }}

                {{ _self.column('waiting', offer, participant, offer.attendances|filter(a => a.waiting), autoCommit, null, preferredPostalCodes) }}

                {% if offer.attendances|filter(a => a.rejected or a.unfulfilled)|length %}
                <div>{% endif %}

                    {{ _self.column('withdrawn', offer, participant, offer.attendances|filter(a => a.withdrawn), autoCommit, null, preferredPostalCodes) }}

                    {% if offer.attendances|filter(a => a.rejected)|length %}
                        <div class="mt-6">
                            {{ _self.column('rejected', offer, participant, offer.attendances|filter(a => a.rejected), autoCommit, null, preferredPostalCodes) }}
                        </div>
                    {% endif %}
                    {% if offer.attendances|filter(a => a.unfulfilled)|length %}
                        <div class="mt-6">
                            {{ _self.column('unfulfilled', offer, participant, offer.attendances|filter(a => a.unfulfilled), autoCommit, null, preferredPostalCodes) }}
                        </div>
                    {% endif %}

                    {% if offer.attendances|filter(a => a.rejected or a.unfulfilled)|length %}</div>{% endif %}
            </div>
        {% endif %}
    {% endif %}

    {% if confirm %}
        <twig:Turbo:Stream:Prepend target="#notifications">
            <twig:Admin:Notification type="mail_sent" title="{{ attendances|length > 1 ? 'Teilnehmer:innen wurden benachrichtigt' : 'Teilnehmer:in wurde benachrichtigt' }}" message="{{ attendances|length > 1 ? 'Die Teilnehmer:innen wurden über die Änderung des Teilnahmestatus informiert': "#{attendances|first.participant.name} wurde über die Änderung des Teilnahmestatus informiert" }}" dismissAfter="0" primaryActionLink="{{ path('admin_outbox', { group: notificationUuid }) }}" primaryActionTitle="{{ attendances|length > 1 ? 'Nachrichten anzeigen' : 'Nachricht anzeigen' }}" />
        </twig:Turbo:Stream:Prepend>
    {% endif %}

</div>
