{% trans_default_domain 'admin' %}
<div {{ attributes }} class="@container">
    <div class="relative flex h-full flex-col bg-white dark:bg-gray-900">
        <div class="flex-1 overflow-y-auto">
            <!-- Header -->
            <div class="bg-gray-50 dark:bg-gray-800/50 px-4 py-6 sm:px-6 @lg:bg-transparent @lg:px-0 @lg:py-0">
                <div class="space-y-1">
                    <h2 id="drawer-title" class="text-base font-semibold text-gray-900 dark:text-white @lg:tracking-tight @lg:text-xl @lg:font-bold @lg:dark:text-gray-50">{{ 'offers.transfer.title'|trans({}, 'admin') }}</h2>
                    <p class="text-sm text-gray-500 dark:text-gray-400 @lg:mt-1 @lg:dark:text-gray-300">
                        {{ 'offers.transfer.description'|trans({}, 'admin') }}
                    </p>
                </div>
            </div>

            <div class="space-y-6 px-4 py-6 sm:px-6">
                <!-- Offer Selection -->
                <div class="pb-6">
                    <div class="flex items-center gap-x-4">
                        <div class="flex-1 min-w-0">
                            <div class="text-sm">
                                <h4 class="truncate text-gray-900 dark:text-white font-medium leading-5">{{ sourceOffer.name }} ({{ "##{sourceOffer.id}" }})</h4>
                                <p class="text-sm text-gray-500 dark:text-gray-400 leading-3">{{ sourceOffer.hosts|map(h => h.name)|join(', ') }}</p>
                                <p class="mt-3 text-sm text-gray-900 dark:text-gray-100 font-medium leading-3">
                                    {% if sourceOffer.dates is not empty %}
                                        <twig:Cms:OfferDate :dates="sourceOffer.dates" short />
                                    {% else %}
                                        {{ 'offers.dates.continuous'|trans({}, 'admin') }}
                                    {% endif %}
                                </p>
                                <p class="mt-1 text-sm text-gray-500 dark:text-gray-400 leading-4">min: {{ sourceOffer.minAge ?: '-' }} / max: {{ sourceOffer.maxAge ?: '-' }} Jahre</p>
                                <p>
                                    <span class="text-sm text-gray-500 dark:text-gray-400 leading-4">min: {{ sourceOffer.minParticipants ?: '-' }} / max: {{ sourceOffer.maxParticipants ?: '-' }} TN</span>
                                    <span>
                                        <twig:Admin:Badge color="green" :content="sourceOffer.attendancesConfirmed|length" />
                                        <twig:Admin:Badge color="yellow" :content="sourceOffer.attendancesWaitlisted|length" />
                                        <twig:Admin:Badge color="gray" :content="sourceOffer.attendancesWaiting|length" />
                                    </span>
                                </p>
                            </div>
                        </div>

                        <div class="flex-none self-center">
                            <button type="button" data-action="live#action" data-live-action-param="swapDirection" class="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-400 hover:text-primary-600 transition-colors">
                                {% if direction == 'to' %}
                                    <twig:ux:icon name="ph:arrow-right" class="size-6" />
                                {% else %}
                                    <twig:ux:icon name="ph:arrow-left" class="size-6" />
                                {% endif %}
                            </button>
                        </div>

                        <div class="flex-1 min-w-0">
                            {% if targetOffer %}
                                <div class="flex items-start justify-between">
                                    <div class="text-sm">
                                        <h4 class="truncate text-gray-900 dark:text-white font-medium leading-5">{{ targetOffer.name }} ({{ "##{targetOffer.id}" }})</h4>
                                        <p class="text-sm text-gray-500 dark:text-gray-400 leading-3">{{ targetOffer.hosts|map(h => h.name)|join(', ') }}</p>
                                        <p class="mt-3 text-sm text-gray-900 dark:text-gray-100 font-medium leading-3">
                                            {% if targetOffer.dates is not empty %}
                                                <twig:Cms:OfferDate :dates="targetOffer.dates" short />
                                            {% else %}
                                                {{ 'offers.dates.continuous'|trans({}, 'admin') }}
                                            {% endif %}
                                        </p>
                                        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400 leading-4">min: {{ targetOffer.minAge ?: '-' }} / max: {{ targetOffer.maxAge ?: '-' }} Jahre</p>
                                        <p>
                                            <span class="text-sm text-gray-500 dark:text-gray-400 leading-4">min: {{ targetOffer.minParticipants ?: '-' }} / max: {{ targetOffer.maxParticipants ?: '-' }} TN</span>
                                            <span>
                                                <twig:Admin:Badge color="green" :content="targetOffer.attendancesConfirmed|length" />
                                                <twig:Admin:Badge color="yellow" :content="targetOffer.attendancesWaitlisted|length" />
                                                <twig:Admin:Badge color="gray" :content="targetOffer.attendancesWaiting|length" />
                                            </span>
                                        </p>
                                    </div>
                                    <button type="button" data-action="live#action" data-live-action-param="unselectOffer" class="ml-4 text-gray-400 hover:text-gray-500 dark:text-gray-500 dark:hover:text-gray-400">
                                        <twig:ux:icon name="ph:x" class="h-5 w-5" />
                                    </button>
                                </div>
                            {% else %}
                                <el-select id="offer-select" class="relative block" data-controller="ferienpass--admin-open-select ferienpass--admin-dropdown" data-ferienpass--admin-open-select-min-value="2" data-action="change->ferienpass--admin-open-select#sync">
                                    <div class="grid w-full cursor-default grid-cols-1 rounded-md bg-white dark:bg-gray-800 py-2 pr-2 pl-3 text-left text-gray-900 dark:text-gray-100 outline-1 -outline-offset-1 outline-gray-300 dark:outline-gray-700 focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-primary-600 sm:text-sm/6" data-action="click->ferienpass--admin-open-select#focusInput">
                                        <input type="text" data-ferienpass--admin-open-select-target="input" data-action="input->ferienpass--admin-open-select#open focus->ferienpass--admin-open-select#open blur->ferienpass--admin-open-select#sync" data-model="debounce(300)|offerSearch" class="shadow-none col-start-1 row-start-1 block w-full border-0 bg-transparent p-0 pr-10 text-gray-900 dark:text-gray-100 placeholder:text-gray-400 dark:placeholder:text-gray-500 focus:ring-0 sm:text-sm" placeholder="{{ 'offers.transfer.search_placeholder'|trans({}, 'admin') }}" autocomplete="off" />
                                        <button type="button" tabindex="-1" class="col-start-1 row-start-1 flex items-center justify-self-end pr-2">
                                            <svg data-loading="model(offerSearch)|delay|show" class="animate-spin size-4 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" style="display: none;">
                                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                                            </svg>
                                            <twig:ux:icon name="ph:caret-up-down" data-loading="model(offerSearch)|delay|hide" data-slot="icon" aria-hidden="true" class="size-5 self-center text-gray-500 dark:text-gray-400 sm:size-4" />
                                        </button>
                                    </div>

                                    <el-options anchor="bottom start" popover class="max-h-96 w-96 overflow-auto rounded-md bg-white dark:bg-gray-900 py-1 text-base shadow-lg outline-1 outline-black/5 dark:outline-white/10 [--anchor-gap:--spacing(1)] transition-discrete data-leave:transition data-leave:duration-100 data-leave:ease-in data-closed:data-leave:opacity-0 sm:text-sm">
                                        {% for o in this.offers %}
                                            <el-option value="{{ o.id }}" data-action="click->live#action" data-live-action-param="selectOffer" data-live-id-param="{{ o.id }}" class="group/option relative block cursor-default py-2 pr-9 pl-3 text-gray-900 dark:text-gray-100 select-none focus:bg-primary-600 focus:text-white focus:outline-hidden">
                                                <div class="flex flex-col">
                                                    <span class="truncate font-normal group-aria-selected/option:font-semibold">{{ o.name }}</span>
                                                    <span class="truncate text-xs text-gray-500 dark:text-gray-400 group-focus/option:text-primary-100">
                                                        {% if o.dates is not empty %}
                                                            {% set startDate = o.dates|first.begin %}
                                                            {% if startDate %}
                                                                {{ startDate|date('d.m.Y') }}
                                                            {% endif %}
                                                        {% endif %}
                                                        {{ o.hosts|length > 0 ? ' | ' ~ o.hosts|map(h => h.name)|join(', ') : '' }}
                                                    </span>
                                                </div>
                                            </el-option>
                                        {% else %}
                                            {% if offerSearch|length >= 2 %}
                                                <div class="px-3 py-2 text-sm text-gray-500 dark:text-gray-400 italic">{{ 'offers.transfer.no_results'|trans({}, 'admin') }}</div>
                                            {% endif %}
                                        {% endfor %}
                                    </el-options>
                                </el-select>
                            {% endif %}
                        </div>
                    </div>
                </div>

                <!-- Participant Lists -->
                <div class="flex items-start gap-x-8">
                    <!-- FROM SIDE -->
                    <div class="flex-1 min-w-0">
                        <div class="flow-root">
                            <div class="overflow-hidden">
                                <div class="inline-block min-w-full align-middle">
                                    <table class="min-w-full table-fixed divide-y divide-gray-300 dark:divide-white/15">
                                        <thead>
                                            <tr>
                                                <th scope="col" class="relative px-2">
                                                    <div class="group relative grid size-4 grid-cols-1">
                                                        <input type="checkbox"
                                                               class="col-start-1 row-start-1 size-4 appearance-none rounded-sm border border-gray-300 bg-white checked:border-primary-600 checked:bg-primary-600 checked:bg-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 dark:border-white/20 dark:bg-gray-800/50 dark:checked:border-primary-500 dark:checked:bg-primary-500 dark:indeterminate:border-primary-500 dark:indeterminate:bg-primary-500 dark:focus-visible:outline-primary-500 dark:disabled:border-white/10 dark:disabled:bg-gray-800 dark:disabled:checked:bg-gray-800 forced-colors:appearance-auto"
                                                               data-action="live#action"
                                                               data-live-action-param="toggleAll"
                                                               {% set transferableCount = 0 %}
                                                               {% if this.fromOffer and this.toOffer %}
                                                                   {% for a in this.fromOffer.attendances %}
                                                                       {% set alreadyInTarget = false %}
                                                                       {% for toAttendance in this.toOffer.attendances %}
                                                                           {% if toAttendance.participant == a.participant %}
                                                                               {% set alreadyInTarget = true %}
                                                                           {% endif %}
                                                                       {% endfor %}
                                                                       {% if not alreadyInTarget %}{% set transferableCount = transferableCount + 1 %}{% endif %}
                                                                   {% endfor %}
                                                               {% elseif this.fromOffer %}
                                                                   {% set transferableCount = this.fromOffer.attendances|length %}
                                                               {% endif %}
                                                               {% if this.fromOffer and selectedAttendanceIds|length > 0 and selectedAttendanceIds|length == transferableCount %}checked{% endif %}
                                                               {% if not this.fromOffer or transferableCount == 0 %}disabled{% endif %}
                                                        />
                                                        <svg viewBox="0 0 14 14" fill="none" class="pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-disabled:stroke-gray-950/25 dark:group-has-disabled:stroke-white/25">
                                                            <path d="M3 8L6 11L11 3.5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="opacity-0 group-has-checked:opacity-100" />
                                                            <path d="M3 7H11" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="opacity-0 group-has-indeterminate:opacity-100" />
                                                        </svg>
                                                    </div>
                                                </th>
                                                <th scope="col" class="py-2 pl-2 pr-1 text-left text-sm font-semibold text-gray-900 dark:text-gray-100">{{ 'offers.transfer.th_participants'|trans({}, 'admin') }}</th>
                                            </tr>
                                        </thead>
                                        <tbody class="divide-y divide-gray-200 dark:divide-gray-800">
                                            {% if this.fromOffer %}
                                                {% set toAttendances = this.toOffer ? this.toOffer.attendances : [] %}
                                                {% for attendance in this.fromOffer.attendances %}
                                                    {% set alreadyInTarget = false %}
                                                    {% for toAttendance in toAttendances %}
                                                        {% if toAttendance.participant == attendance.participant %}
                                                            {% set alreadyInTarget = true %}
                                                        {% endif %}
                                                    {% endfor %}
                                            <tr class="group {% if alreadyInTarget %}opacity-50{% endif %}">
                                                        <td class="relative px-2">
                                                            <div class="group relative grid size-4 grid-cols-1">
                                                                <input type="checkbox" name="selectedAttendanceIds[]" value="{{ attendance.id }}" data-model="selectedAttendanceIds"
                                                                       {% if alreadyInTarget %}disabled title="{{ 'offers.transfer.already_in_target'|trans({}, 'admin') }}"{% endif %}
                                                                       class="col-start-1 row-start-1 size-4 appearance-none rounded-sm border border-gray-300 bg-white checked:border-primary-600 checked:bg-primary-600 checked:bg-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 dark:border-white/20 dark:bg-gray-800/50 dark:checked:border-primary-500 dark:checked:bg-primary-500 dark:focus-visible:outline-primary-500 dark:disabled:border-white/10 dark:disabled:bg-gray-800 dark:disabled:checked:bg-gray-800 forced-colors:appearance-auto" />
                                                                <svg viewBox="0 0 14 14" fill="none" class="pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-disabled:stroke-gray-950/25 dark:group-has-disabled:stroke-white/25">
                                                                    <path d="M3 8L6 11L11 3.5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="opacity-0 group-has-checked:opacity-100" />
                                                                </svg>
                                                            </div>
                                                        </td>
                                                        <td class="whitespace-nowrap py-1.5 pl-2 pr-1 text-sm">
                                                            <div class="flex flex-col">
                                                                <span class="font-medium text-gray-900 dark:text-gray-100 truncate">
                                                                    {{ attendance.participant.name }}
                                                                    {% if alreadyInTarget %}
                                                                        <span class="ml-1 text-[10px] uppercase tracking-wider text-gray-500 dark:text-gray-400 font-bold">{{ 'offers.transfer.already_in_target'|trans({}, 'admin') }}</span>
                                                                    {% endif %}
                                                                </span>
                                                                <div class="-ml-1">
                                                                <twig:Admin:Badge attendance="{{ attendance.status }}" size="xs" />
                                                                </div>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                {% endfor %}
                                            {% else %}
                                                <tr>
                                                    <td colspan="2" class="px-3 py-4 text-center text-sm text-gray-500 italic">{{ 'offers.transfer.no_offer_selected'|trans({}, 'admin') }}</td>
                                                </tr>
                                            {% endif %}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- TO SIDE -->
                    <div class="flex-1 min-w-0">
                        <div class="space-y-4">
                            {% if this.toOffer %}
                                <div class="flow-root">
                                    <div class="overflow-hidden">
                                        <div class="inline-block min-w-full align-middle">
                                            <table class="min-w-full table-fixed divide-y divide-gray-300 dark:divide-white/15">
                                                <thead>
                                                    <tr>
                                                <th scope="col" class="py-2 pl-2 pr-1 text-left text-sm font-semibold text-gray-900 dark:text-gray-100">{{ 'offers.transfer.th_participants'|trans({}, 'admin') }}</th>
                                                    </tr>
                                                </thead>
                                                <tbody class="divide-y divide-gray-200 dark:divide-gray-800">
                                                    {% for attendance in this.toOffer.attendances %}
                                                        <tr>
                                                            <td class="whitespace-nowrap py-1.5 pl-2 pr-1 text-sm">
                                                                <div class="flex flex-col">
                                                                    <span class="font-medium text-gray-900 dark:text-gray-100 truncate">{{ attendance.participant.name }}</span>
                                                                    <div class="-ml-1">
                                                                    <twig:Admin:Badge attendance="{{ attendance.status }}" size="xs" />
                                                                    </div>
                                                                </div>
                                                            </td>
                                                        </tr>
                                                    {% endfor %}
                                                    {% for attendance in this.selectedAttendances %}
                                                        <tr class="bg-yellow-50 dark:bg-yellow-900/20">
                                                            <td class="whitespace-nowrap py-1.5 pl-2 pr-1 text-sm">
                                                                <div class="flex flex-col">
                                                                    <span class="inline-flex items-center gap-x-1 font-medium text-yellow-900 dark:text-yellow-100 truncate">
                                                                        <twig:ux:icon name="ph:plus-circle" class="size-4 text-yellow-600" />
                                                                        {{ attendance.participant.name }}
                                                                    </span>
                                                                    <div class="-ml-1">
                                                                    <twig:Admin:Badge attendance="{{ status }}" size="xs" />
                                                                    </div>
                                                                </div>
                                                            </td>
                                                        </tr>
                                                    {% endfor %}
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            {% else %}
                                <div class="rounded-md border-2 border-dashed border-gray-200 dark:border-gray-800 p-12 text-center">
                                    <twig:ux:icon name="ph:users" class="mx-auto size-12 text-gray-300" />
                                    <h3 class="mt-2 text-sm font-semibold text-gray-900 dark:text-white">{{ 'offers.transfer.no_target_selected'|trans({}, 'admin') }}</h3>
                                    <p class="mt-1 text-sm text-gray-500">{{ 'offers.transfer.select_target_instruction'|trans({}, 'admin') }}</p>
                                </div>
                            {% endif %}
                        </div>
                    </div>
                </div>

                <!-- Status & Notify -->
                <div class="border-t border-gray-200 dark:border-gray-800 pt-6 space-y-6 sm:space-y-0 sm:divide-y sm:divide-gray-200 dark:sm:divide-gray-800">
                    <div class="space-y-2 @lg:grid @lg:grid-cols-3 @lg:gap-4 sm:space-y-0 sm:py-5">
                        <div>
                            <label for="new_status" class="block text-sm/6 font-medium text-gray-900 dark:text-gray-100 sm:mt-1.5">{{ 'offers.transfer.new_status'|trans({}, 'admin') }}</label>
                        </div>
                        <div class="sm:col-span-2">
                            <select id="new_status" data-model="on(change)|status" data-action="live#action" data-live-action-param="updatedStatus" class="block w-full rounded-md bg-white dark:bg-gray-800 px-3 py-1.5 text-base text-gray-900 dark:text-gray-100 border-0 ring-1 ring-inset ring-gray-300 dark:ring-gray-700 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm/6">
                                <option value="confirmed" {{ status == 'confirmed' ? 'selected' : '' }}>{{ 'status.confirmed'|trans({}, 'admin') }}</option>
                                <option value="waitlisted" {{ status == 'waitlisted' ? 'selected' : '' }}>{{ 'status.waitlisted'|trans({}, 'admin') }}</option>
                                <option value="waiting" {{ status == 'waiting' ? 'selected' : '' }}>{{ 'status.waiting'|trans({}, 'admin') }}</option>
                            </select>
                        </div>
                    </div>

                    <div class="space-y-2 @lg:grid @lg:grid-cols-3 @lg:gap-4 sm:space-y-0 sm:py-5">
                        <div>
                            <span class="block text-sm/6 font-medium text-gray-900 dark:text-gray-100 sm:mt-1.5">{{ 'attendances.label.settings'|trans({}, 'admin') }}</span>
                        </div>
                        <div class="sm:col-span-2 space-y-4">
                            <div class="relative flex items-start">
                                <div class="flex h-6 items-center">
                                    <input id="commit" type="checkbox" data-model="commit" class="h-4 w-4 rounded border-gray-300 dark:border-gray-700 dark:bg-gray-800 text-primary-600 focus:ring-primary-600" {% if commit %}checked{% endif %} />
                                </div>
                                <div class="ml-3 text-sm/6">
                                    <label for="commit" class="font-medium text-gray-900 dark:text-gray-100">{{ 'attendances.label.commit'|trans({}, 'admin') }}</label>
                                    <p class="text-gray-500 dark:text-gray-400">{{ 'attendances.help.commit'|trans({}, 'admin') }}</p>
                                </div>
                            </div>
                            <div class="relative flex items-start {{ not this.isNotifiable ? 'opacity-50' : '' }}">
                                <div class="flex h-6 items-center">
                                    <input id="notify" type="checkbox" data-model="notify" class="h-4 w-4 rounded border-gray-300 dark:border-gray-700 dark:bg-gray-800 text-primary-600 focus:ring-primary-600" {% if not this.isNotifiable %}disabled{% endif %} />
                                </div>
                                <div class="ml-3 text-sm/6">
                                    <label for="notify" class="font-medium text-gray-900 dark:text-gray-100">{{ 'offers.transfer.notify'|trans({}, 'admin') }}</label>
                                    <p class="text-gray-500 dark:text-gray-400">{{ 'attendances.help.notify'|trans({}, 'admin') }}</p>
                                    {% if not this.isNotifiable %}
                                        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400 italic">{{ 'attendances.help.notNotifiable'|trans({}, 'admin') }}</p>
                                    {% endif %}
                                </div>
                            </div>
                            {% if _errors.has('notify') %}
                                <p class="mt-2 text-sm text-red-600">{{ _errors.get('notify')|trans({}, 'admin') }}</p>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Action buttons -->
        <div class="shrink-0 border-t border-gray-200 dark:border-gray-800 px-4 py-5 sm:px-6">
            <div class="flex justify-end gap-x-3">
                <twig:Admin:Button variant="secondary" command="close" commandfor="admin-slideover-dialog">{{ 'offers.transfer.cancel'|trans({}, 'admin') }}</twig:Admin:Button>
                <twig:Admin:Button variant="primary" data-action="live#action" data-live-action-param="submit" :disabled="selectedAttendanceIds|length == 0 or not targetOffer">{{ 'offers.transfer.submit'|trans({}, 'admin') }}</twig:Admin:Button>
            </div>
        </div>
    </div>

    {% if successOffer %}
        <twig:Turbo:Stream:Update target="#slideover"/>

        <twig:Turbo:Stream:Prepend target="#notifications">
            <twig:Admin:Notification type="success" title="{{ 'offers.transfer.title'|trans({}, 'admin') }}" message="{{ 'offers.transfer.success_message'|trans({count: selectedAttendanceIds|length}, 'admin') }}" primaryActionTitle="{{ 'offers.transfer.show_participant_list'|trans({}, 'admin') }}" primaryActionLink="{{ path('admin_offers_participants', { uuid: successOffer.uuid.toBase58 }) }}"/>
        </twig:Turbo:Stream:Prepend>

        {% if notificationSent %}
            <twig:Turbo:Stream:Prepend target="#notifications">
                <twig:Admin:Notification type="mail_sent" title="{{ 'offers.transfer.notification_title'|trans({}, 'admin') }}" message="{{ 'offers.transfer.notification_message'|trans({}, 'admin') }}" dismissAfter="0" primaryActionLink="{{ path('admin_outbox', { group: notificationUuid }) }}" primaryActionTitle="{{ 'offers.transfer.show_message'|trans({}, 'admin') }}" />
            </twig:Turbo:Stream:Prepend>
        {% endif %}
    {% endif %}
</div>
