 

{% trans_default_domain 'admin' %}

<div {{ attributes }} class="@container">

    <form class="relative flex h-full flex-col overflow-y-auto bg-white dark:bg-gray-900" data-action="live#action:prevent" data-live-action-param="submit">

        <div class="flex-1">
            <!-- 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">{{ 'attendances.new'|trans({}, 'admin') }}</h2>
                    <p class="text-sm text-gray-500 dark:text-gray-400 @lg:mt-1 @lg:dark:text-gray-300">
                        {{ 'attendances.new_description'|trans({}, 'admin') }}
                    </p>
                </div>
            </div>

            {% if success is not null %}
                <div class="px-4 py-6 sm:px-6">
                    <twig:Admin:Alert type="confirm" class="shadow border border-green-700/30">
                        {{ 'attendances.success_message'|trans({
                            '{participant}': '<a target="_blank" class="font-medium underline hover:no-underline" href="' ~ path('admin_participants_attendances', {uuid: success.participant.uuid.toBase58}) ~ '">' ~ success.participant.name ~ '</a>',
                            '{offer}': '<a target="_blank" class="font-medium underline hover:no-underline" href="' ~ path('admin_offers_participants', { uuid: success.offer.uuid.toBase58 }) ~ '">' ~ success.offer.name ~ '</a>'
                        }, 'admin')|raw }}
                    </twig:Admin:Alert>
                </div>
            {% endif %}

            <!-- Divider container -->
            <div class="space-y-6 py-6 sm:space-y-0 sm:divide-y sm:divide-gray-200 dark:sm:divide-gray-800 sm:py-0">

                {% if offer %}
                    <div class="space-y-2 px-4 @lg:grid @lg:grid-cols-3 @lg:gap-4 sm:space-y-0 sm:px-6 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.offer'|trans({}, 'admin') }}</span>
                        </div>
                        <div class="sm:col-span-2">
                            <div class="flex items-start justify-between">
                                <div class="text-sm">
                                    <h4 class="truncate text-gray-900 dark:text-white font-medium leading-5">{{ offer.name }} ({{ "##{offer.id}" }})</h4>
                                    <p class="text-sm text-gray-500 dark:text-gray-400 leading-3">{{ offer.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 offer.dates is not empty %}
                                            <twig:Cms:OfferDate :dates="offer.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: {{ offer.minAge ?: '-' }} / max: {{ offer.maxAge ?: '-' }} Jahre</p>
                                    <p>
                                        <span class="text-sm text-gray-500 dark:text-gray-400 leading-4">min: {{ offer.minParticipants ?: '-' }} / max: {{ offer.maxParticipants ?: '-' }} TN</span>
                                        <span>
                                            <twig:Admin:Badge color="green" :content="offer.attendancesConfirmed|length" />
                                            <twig:Admin:Badge color="yellow" :content="offer.attendancesWaitlisted|length" />
                                            <twig:Admin:Badge color="gray" :content="offer.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>
                        </div>
                    </div>
                {% else %}
                    <div class="space-y-2 px-4 @lg:grid @lg:grid-cols-3 @lg:gap-4 sm:space-y-0 sm:px-6 sm:py-5">
                        <div class="mb-1 @lg:mb-0">
                            <label for="offer-select" class="block text-sm/6 font-medium text-gray-900 dark:text-gray-100 sm:mt-1.5">{{ 'attendances.label.offer'|trans({}, 'admin') }}</label>
                        </div>
                        <div class="sm:col-span-2">
                            <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">
                                    <button type="button" tabindex="-1" class="pointer-events-none col-start-1 row-start-1 flex items-center">
                                        <el-selectedcontent data-ferienpass--admin-open-select-target="selected" class="flex w-full gap-2 pr-6"></el-selectedcontent>
                                    </button>
                                    <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="{{ 'attendances.search_offer_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') }}
                                                        {% else %}
                                                            <span class="inline-flex items-center text-orange-600">
                                                                {{ ux_icon('ph:warning', {class: 'mr-1 size-4'}) }}
                                                                <span>{{ 'offers.dates.missing'|trans({}, 'admin') }}</span>
                                                            </span>
                                                        {% endif %}
                                                    {% endif %}
                                                    {{ o.hosts|length > 0 ? (o.dates is not empty ? ' | ' : '') ~ o.hosts|map(h => h.name)|join(', ') : '' }}
                                                </span>
                                            </div>
                                            <span class="absolute inset-y-0 right-0 flex items-center pr-4 text-primary-600 group-not-aria-selected/option:hidden group-focus/option:text-white in-[el-selectedcontent]:hidden">
                                                <twig:ux:icon name="ph:check" data-slot="icon" aria-hidden="true" class="size-5" />
                                            </span>
                                        </el-option>
                                    {% else %}
                                        {% if offerSearch|length >= 2 %}
                                            <div class="px-3 py-2 text-sm text-gray-500 dark:text-gray-400 italic">
                                                {{ 'attendances.no_results'|trans({}, 'admin') }}
                                            </div>
                                        {% endif %}
                                    {% endfor %}
                                </el-options>
                            </el-select>
                            {% if _errors.has('offer') %}
                                <p class="mt-2 text-sm text-red-600">{{ _errors.get('offer')|trans({}, 'admin') }}</p>
                            {% endif %}
                        </div>
                    </div>
                {% endif %}

                {% if participant %}
                    <div class="space-y-2 px-4 @lg:grid @lg:grid-cols-3 @lg:gap-4 @lg:space-y-0 sm:px-6 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.participant'|trans({}, 'admin') }}</span>
                        </div>
                        <div class="sm:col-span-2">
                            <div class="flex items-start justify-between">
                                <div class="text-sm">
                                    <h4 class="truncate text-gray-900 dark:text-white font-medium leading-5">{{ participant.name }} ({{ "#{participant.age} " ~ 'participantList.years'|trans({}, 'admin') }})</h4>
                                    {% if participant.user is not null %}
                                        <p class="text-sm text-gray-500 dark:text-gray-400 leading-3">{{ participant.user.name }}</p>
                                    {% endif %}
                                </div>
                                <button type="button" data-action="live#action" data-live-action-param="unselectParticipant" 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>

                            {% if offer %}
                                {% set startDate = offer.dates|first.begin %}
                                {% set age = (offer.dates is not empty and startDate) ? participant.age(startDate) : participant.age %}
                                {% if (offer.minAge and age < offer.minAge) or (offer.maxAge and age > offer.maxAge) %}
                                    <p class="mt-2 flex items-center">
                                        <span class="h-5 w-5 text-red-700"><twig:ux:icon name="ph:warning" /></span>
                                        <span class="ml-1 text-sm font-medium leading-5 text-red-700">{{ 'attendances.age_not_allowed'|trans({}, 'admin') }}
                                            <span class="font-normal">{{ 'attendances.enroll_anyway'|trans({}, 'admin') }}</span>
                                        </span>
                                    </p>
                                {% endif %}
                            {% endif %}
                        </div>
                    </div>
                {% else %}
                    <div class="space-y-2 px-4 @lg:grid @lg:grid-cols-3 @lg:gap-4 sm:space-y-0 sm:px-6 sm:py-5">
                        <div class="mb-1 @lg:mb-0">
                            <label for="participant-select" class="block text-sm/6 font-medium text-gray-900 dark:text-gray-100 sm:mt-1.5">{{ 'attendances.label.participant'|trans({}, 'admin') }}</label>
                        </div>
                        <div class="sm:col-span-2">
                            <el-select id="participant-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">
                                    <button type="button" tabindex="-1" class="pointer-events-none col-start-1 row-start-1 flex items-center">
                                        <el-selectedcontent data-ferienpass--admin-open-select-target="selected" class="flex w-full gap-2 pr-6"></el-selectedcontent>
                                    </button>
                                    <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)|participantSearch" 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="{{ 'attendances.search_participant_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(participantSearch)|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(participantSearch)|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 p in this.participants %}
                                        <el-option value="{{ p.id }}" data-action="click->live#action" data-live-action-param="selectParticipant" data-live-id-param="{{ p.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">{{ p.name }}</span>
                                                <span class="mt-0.5 truncate text-xs text-gray-500 dark:text-gray-400 group-focus/option:text-primary-100">{{ p.dateOfBirth ? p.dateOfBirth|date('d.m.Y') : '' }}</span>
                                            </div>
                                            <span class="absolute inset-y-0 right-0 flex items-center pr-4 text-primary-600 group-not-aria-selected/option:hidden group-focus/option:text-white in-[el-selectedcontent]:hidden">
                                                <twig:ux:icon name="ph:check" data-slot="icon" aria-hidden="true" class="size-5" />
                                            </span>
                                        </el-option>
                                    {% else %}
                                        {% if participantSearch|length >= 2 %}
                                            <div class="px-3 py-2 text-sm text-gray-500 dark:text-gray-400 italic">
                                                {{ 'attendances.no_results'|trans({}, 'admin') }}
                                            </div>
                                        {% endif %}
                                    {% endfor %}
                                </el-options>
                            </el-select>
                            {% if _errors.has('participant') %}
                                <p class="mt-2 text-sm text-red-600">{{ _errors.get('participant')|trans({}, 'admin') }}</p>
                            {% endif %}
                        </div>
                    </div>
                {% endif %}

                <!-- Status -->
                <div class="space-y-2 px-4 @lg:grid @lg:grid-cols-3 @lg:gap-4 sm:space-y-0 sm:px-6 sm:py-5">
                    <div class="mb-1 @lg:mb-0">
                        <label for="status" class="block text-sm/6 font-medium text-gray-900 dark:text-gray-100 sm:mt-1.5">{{ 'attendances.label.status'|trans({}, 'admin') }}</label>
                    </div>
                    <div class="sm:col-span-2">
                        <select id="status" name="status" data-model="status" 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>

                <!-- Einstellungen -->
                <div class="space-y-2 px-4 @lg:grid @lg:grid-cols-3 @lg:gap-4 sm:space-y-0 sm:px-6 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 notify %}checked{% endif %} {% 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">{{ 'attendances.label.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>
                                {% elseif not this.isParticipantNotifiable %}
                                    <p class="mt-1 text-xs text-gray-500 dark:text-gray-400 italic">
                                        {{ 'attendances.help.notNotifiableParticipant'|trans({}, 'admin') }}
                                        {% if notify %}
                                            <span class="font-semibold text-red-600">
                                                ({{ participant.name }})
                                            </span>
                                        {% endif %}
                                    </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>

        <!-- 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">
                <div class="inline-flex rounded-md shadow-xs">
                    <button type="button" data-action="live#action" data-live-action-param="submit" data-live-redirect-param="new" class="relative inline-flex items-center rounded-l-md bg-primary-600 px-3 py-2 text-sm font-semibold text-white hover:bg-primary-700 focus:z-10">{{ 'attendances.submit_and_new'|trans({}, 'admin') }}</button>
                    <twig:Admin:Dropdown class="relative -ml-px block" dropdownClass="w-64">
                        <twig:block name="toggle">
                            <button type="button" class="relative inline-flex items-center rounded-r-md bg-primary-600 px-2 py-2 text-white border-l border-primary-700 dark:border-primary-800 hover:bg-primary-700 focus:z-10">
                                <span class="sr-only">{{ 'attendances.options_aria'|trans({}, 'admin') }}</span>
                                <twig:ux:icon name="ph:caret-down" data-slot="icon" aria-hidden="true" class="size-5" />
                            </button>
                        </twig:block>
                        <twig:block name="dropdown">
                            <div class="py-1">
                                <button type="button" data-action="live#action" data-live-action-param="submit" data-live-redirect-param="participant" class="block w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 focus:bg-gray-100 dark:focus:bg-gray-700 focus:text-gray-900 dark:focus:text-white focus:outline-hidden">{{ 'attendances.submit_and_participant'|trans({}, 'admin') }}</button>
                                <button type="button" data-action="live#action" data-live-action-param="submit" data-live-redirect-param="offer" class="block w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 focus:bg-gray-100 dark:focus:bg-gray-700 focus:text-gray-900 dark:focus:text-white focus:outline-hidden">{{ 'attendances.submit_and_offer'|trans({}, 'admin') }}</button>
                            </div>
                        </twig:block>
                    </twig:Admin:Dropdown>
                </div>
            </div>
        </div>

    </form>

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

</div>
