{# Friends booking — lot mode only.
   Drawn together: either everyone in the group gets a spot, or nobody does.

   Bound to the LiveProps `useFriendsBooking`, `useFriendCode` and
   `friendCode.code`. Selecting options happens CLIENT-SIDE (norender models +
   CSS :checked reveal) — only the friend-code text input talks to the server
   (validation + matched participants). Include WITHOUT `only`. #}

{% set p_scope = participant is defined and participant ? participant.id : 'anon' %}

<div class="border-t border-gray-200 pt-5 dark:border-gray-700">

    <div class="flex items-center gap-3">
        <div class="grid size-8 flex-none place-items-center rounded-md bg-blue-50 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400">
            <twig:ux:icon name="lucide:users" class="size-4" />
        </div>
        <h3 class="flex-1 text-xs font-bold uppercase tracking-widest text-gray-900 dark:text-gray-100">
            {{ 'applicationForm.friends.title'|trans({}, 'cms') }}
        </h3>
        <span class="inline-flex rounded-full bg-blue-50 px-2.5 py-1 text-[10px] font-bold uppercase tracking-wide text-blue-700 dark:bg-blue-900/30 dark:text-blue-400">
            {{ 'applicationForm.friends.lotOnly'|trans({}, 'cms') }}
        </span>
    </div>
    <p class="mb-3 mt-1.5 text-[13px] leading-5 text-gray-500 dark:text-gray-400 sm:ml-11">
        {{ 'applicationForm.friends.caption'|trans({}, 'cms') }}
    </p>

    {# master toggle reveals the options below — pure CSS, no round-trip #}
    <div class="group/fb">
        <label class="flex cursor-pointer items-start gap-3">
            <input type="checkbox"
                   id="opt-friendsBooking"
                   data-model="norender|useFriendsBooking"
                   {% if useFriendsBooking %}checked{% endif %}
                   class="mt-1 size-4 rounded border-gray-300 text-primary-600 focus:ring-primary-600">
            <span class="text-sm leading-5">
                <span class="font-medium text-gray-900 dark:text-gray-100">{{ 'applicationForm.lottery.friendsOnly'|trans({}, 'cms')|raw }}</span>
                <span class="font-normal text-gray-500 dark:text-gray-300">{{ 'applicationForm.lottery.friendsInfo'|trans({}, 'cms') }}</span>
            </span>
        </label>

        <div class="mt-2 hidden flex-col gap-px pl-7 group-has-[>label>input:checked]/fb:flex">

            {% for i, sibling in this.siblingCodes %}
                <label class="group/opt flex cursor-pointer items-center gap-3 rounded-md px-2.5 py-2 transition has-checked:bg-transparent hover:bg-gray-50 dark:hover:bg-white/5">
                    <input type="radio" class="peer sr-only" name="useFriendCode_{{ p_scope }}"
                           data-model="norender|useFriendCode"
                           value="{{ sibling.code }}" {% if useFriendCode == sibling.code %}checked{% endif %}>
                    <span class="grid size-[18px] flex-none place-items-center rounded-full border-2 border-gray-300 after:size-2 after:scale-0 after:rounded-full after:bg-primary-600 after:transition-transform peer-checked:border-primary-600 peer-checked:after:scale-100 dark:border-gray-600 dark:after:bg-primary-500 dark:peer-checked:border-primary-500"></span>
                    <span class="text-sm font-medium text-gray-600 peer-checked:font-semibold peer-checked:text-gray-900 dark:text-gray-300 dark:peer-checked:text-gray-100">
                        {{ 'applicationForm.lottery.onlyTogetherWith'|trans({}, 'cms') }}
                        <span class="font-semibold text-gray-900 dark:text-gray-100">{{ sibling.participants|map(p => p.firstname)|join(' und ') }}</span>
                    </span>
                </label>
            {% endfor %}

            {% for i, sibling in this.siblingsWithoutCode %}
                <label class="group/opt flex cursor-pointer items-center gap-3 rounded-md px-2.5 py-2 transition hover:bg-gray-50 dark:hover:bg-white/5">
                    <input type="radio" class="peer sr-only" name="useFriendCode_{{ p_scope }}"
                           data-model="norender|useFriendCode"
                           value="{{ sibling.id }}" {% if useFriendCode == sibling.id %}checked{% endif %}>
                    <span class="grid size-[18px] flex-none place-items-center rounded-full border-2 border-gray-300 after:size-2 after:scale-0 after:rounded-full after:bg-primary-600 after:transition-transform peer-checked:border-primary-600 peer-checked:after:scale-100 dark:border-gray-600 dark:after:bg-primary-500 dark:peer-checked:border-primary-500"></span>
                    <span class="text-sm font-medium text-gray-600 peer-checked:font-semibold peer-checked:text-gray-900 dark:text-gray-300 dark:peer-checked:text-gray-100">
                        {{ 'applicationForm.lottery.onlyTogetherWith'|trans({}, 'cms') }}
                        <span class="font-semibold text-gray-900 dark:text-gray-100">{{ sibling.firstname }}</span>
                    </span>
                </label>
            {% endfor %}

            {# redeem a friend's code — the code input itself does talk to the
               server (ValidFriendCode + matched participants list) #}
            <div class="group/opt">
                <label class="flex cursor-pointer items-center gap-3 rounded-md px-2.5 py-2 transition hover:bg-gray-50 dark:hover:bg-white/5">
                    <input type="radio" class="peer sr-only" name="useFriendCode_{{ p_scope }}"
                           data-model="norender|useFriendCode"
                           value="redeem" {% if useFriendCode == 'redeem' %}checked{% endif %}>
                    <span class="grid size-[18px] flex-none place-items-center rounded-full border-2 border-gray-300 after:size-2 after:scale-0 after:rounded-full after:bg-primary-600 after:transition-transform peer-checked:border-primary-600 peer-checked:after:scale-100 dark:border-gray-600 dark:after:bg-primary-500 dark:peer-checked:border-primary-500"></span>
                    <span class="text-sm font-medium text-gray-600 peer-checked:font-semibold peer-checked:text-gray-900 dark:text-gray-300 dark:peer-checked:text-gray-100">
                        {{ 'applicationForm.lottery.useFriendCode'|trans({}, 'cms') }}
                    </span>
                </label>
                <div class="hidden pb-2 pl-10 pr-2.5 pt-1 group-has-[label>input:checked]/opt:block">
                    <input type="text"
                           data-model="on(change)|friendCode.code"
                           id="inp-friendCode"
                           placeholder="XXXX-XXXX"
                           class="block w-full max-w-56 rounded-md border-0 py-2 text-sm font-semibold uppercase tracking-widest text-gray-900 shadow-sm ring-1 ring-inset {{ _errors.has('friendCode.code') ? 'ring-red-300 placeholder:text-red-300 focus:ring-red-500' : 'ring-gray-300 placeholder:text-gray-400 focus:ring-primary-600' }} focus:ring-2 focus:ring-inset dark:bg-gray-900 dark:text-gray-100">
                    {% if _errors.has('friendCode.code') %}
                        <p class="mt-1 text-xs leading-4 text-red-600">{{ _errors.get('friendCode.code') }}</p>
                    {% endif %}
                    {% if friendCode.code %}
                        <ul class="mt-2 space-y-1">
                            {% for friend in this.friendCodeParticipants %}
                                <li class="flex items-center gap-1.5 text-xs font-semibold text-[#245a46] dark:text-[#9cc4ae]">
                                    <twig:ux:icon name="lucide:check" class="size-3.5" />
                                    {{ 'applicationForm.lottery.onlyTogetherWith'|trans({}, 'cms') }} {{ friend.firstname }}
                                </li>
                            {% endfor %}
                        </ul>
                    {% else %}
                        <p class="mt-2 flex items-start gap-1.5 text-xs leading-5 text-gray-400 dark:text-gray-500">
                            <twig:ux:icon name="lucide:info" class="mt-0.5 size-3.5 flex-none" />
                            {{ 'applicationForm.friends.codeHint'|trans({}, 'cms') }}
                        </p>
                    {% endif %}
                </div>
            </div>

            {# share your own code #}
            <div class="group/opt">
                <label class="flex cursor-pointer items-center gap-3 rounded-md px-2.5 py-2 transition hover:bg-gray-50 dark:hover:bg-white/5">
                    <input type="radio" class="peer sr-only" name="useFriendCode_{{ p_scope }}"
                           data-model="norender|useFriendCode"
                           value="on-hold" {% if useFriendCode == 'on-hold' %}checked{% endif %}>
                    <span class="grid size-[18px] flex-none place-items-center rounded-full border-2 border-gray-300 after:size-2 after:scale-0 after:rounded-full after:bg-primary-600 after:transition-transform peer-checked:border-primary-600 peer-checked:after:scale-100 dark:border-gray-600 dark:after:bg-primary-500 dark:peer-checked:border-primary-500"></span>
                    <span class="text-sm font-medium text-gray-600 peer-checked:font-semibold peer-checked:text-gray-900 dark:text-gray-300 dark:peer-checked:text-gray-100">
                        {{ 'applicationForm.friends.shareCode'|trans({}, 'cms') }}
                    </span>
                </label>
                <div class="hidden pb-2 pl-10 pr-2.5 pt-1 group-has-[label>input:checked]/opt:block">
                    <div class="flex items-center gap-3 rounded-lg border-2 border-dashed border-primary-300 bg-white px-4 py-2.5 dark:border-primary-700 dark:bg-gray-900">
                        <span class="flex-1 font-mono text-lg font-bold tracking-[.12em] text-primary-700 dark:text-primary-300">{{ yourFriendCode }}</span>
                    </div>
                    <p class="mt-2 text-xs leading-5 text-gray-500 dark:text-gray-400">
                        {{ 'applicationForm.friends.shareCodeInfo'|trans({}, 'cms') }}
                    </p>
                </div>
            </div>

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