

{% trans_default_domain 'admin' %}

{% set attendance = this.attendance %}
{% set participant = attendance.participant %}
{% set offer = attendance.offer %}

<div {{ attributes }} class="@container flex h-full flex-col bg-white dark:bg-gray-900">

    {# ── header: identity ── #}
    <div class="border-b border-gray-100 dark:border-gray-800 px-4 py-5 sm:px-6">
        <p class="text-xs font-semibold text-gray-500 dark:text-gray-400">{{ 'attendanceShow.kicker'|trans({}, 'admin') }}</p>
        <div class="mt-2 flex items-start gap-3">
            <div class="min-w-0">
                <h2 id="drawer-title" class="truncate text-xl font-bold tracking-tight text-gray-900 dark:text-white">{{ participant ? participant.name : 'attendanceShow.deletedParticipant'|trans({}, 'admin') }}</h2>
                {% if offer %}
                    <p class="mt-0.5 text-sm text-gray-500 dark:text-gray-400">{{ 'attendanceShow.for'|trans({}, 'admin') }} <span class="font-medium text-gray-700 dark:text-gray-300">{{ offer.name }}</span>{% if participant and participant.age %} · {{ participant.age }} {{ 'participantList.years'|trans({}, 'admin') }}{% endif %}</p>
                {% endif %}
            </div>
        </div>
        <div class="mt-3 flex items-center gap-2">
            <twig:Admin:Badge attendance="{{ attendance.status }}" size="base" dot />
            <span class="rounded-md bg-gray-100 px-2 py-0.5 text-xs font-semibold text-gray-500 dark:bg-gray-800 dark:text-gray-400">#{{ attendance.id }}</span>
        </div>
    </div>

    <div class="flex-1 overflow-y-auto">

        {# ── Teilnehmer:in & Kontakt ── #}
        <div class="border-t border-gray-100 dark:border-gray-800 px-4 py-5 sm:px-6 first:border-t-0">
            <h3 class="text-sm/6 font-medium text-gray-900 dark:text-gray-100">{{ 'attendanceShow.contact.title'|trans({}, 'admin') }}</h3>
            <dl class="mt-3 grid grid-cols-2 gap-x-5 gap-y-4">
                <div>
                    <dt class="text-xs font-medium text-gray-500 dark:text-gray-400">{{ 'attendanceShow.contact.name'|trans({}, 'admin') }}</dt>
                    <dd class="mt-0.5 text-sm font-semibold text-gray-900 dark:text-gray-100">{{ participant ? participant.name : '—' }}</dd>
                </div>
                <div>
                    <dt class="text-xs font-medium text-gray-500 dark:text-gray-400">{{ 'attendanceShow.contact.dateOfBirth'|trans({}, 'admin') }}</dt>
                    <dd class="mt-0.5 text-sm font-semibold text-gray-900 dark:text-gray-100">
                        {{ participant.dateOfBirth ? participant.dateOfBirth|date('d.m.Y') : '—' }}
                        {% if participant and participant.age %}<span class="block text-xs font-medium text-gray-500 dark:text-gray-400">{{ participant.age }} {{ 'participantList.years'|trans({}, 'admin') }}</span>{% endif %}
                    </dd>
                </div>
                <div class="col-span-2">
                    <dt class="text-xs font-medium text-gray-500 dark:text-gray-400">{{ 'attendanceShow.contact.account'|trans({}, 'admin') }}</dt>
                    <dd class="mt-0.5 text-sm font-semibold text-gray-900 dark:text-gray-100">
                        {% if participant and participant.user %}
                            {{ participant.user.name }}
                        {% else %}
                            {{ 'attendanceShow.contact.noAccount'|trans({}, 'admin') }}<span class="block text-xs font-medium text-gray-500 dark:text-gray-400">{{ 'attendanceShow.contact.noAccountHint'|trans({}, 'admin') }}</span>
                        {% endif %}
                    </dd>
                </div>
                {% if participant and (participant.user or participant.email or participant.mobile) %}
                    <div class="col-span-2"><span class="block h-px bg-gray-100 dark:bg-gray-800"></span></div>
                    {% if participant.user %}
                        <div>
                            <dt class="text-xs font-medium text-gray-500 dark:text-gray-400">{{ 'attendanceShow.contact.guardian'|trans({}, 'admin') }}</dt>
                            <dd class="mt-0.5 text-sm font-semibold text-gray-900 dark:text-gray-100">{{ participant.user.name }}</dd>
                        </div>
                    {% endif %}
                    {% if participant.mobile %}
                        <div>
                            <dt class="text-xs font-medium text-gray-500 dark:text-gray-400">{{ 'attendanceShow.contact.mobile'|trans({}, 'admin') }}</dt>
                            <dd class="mt-0.5 text-sm font-semibold text-primary-700 dark:text-primary-300"><a href="tel:{{ participant.mobile }}" class="hover:underline">{{ participant.mobile }}</a></dd>
                        </div>
                    {% endif %}
                    {% if participant.email %}
                        <div class="col-span-2">
                            <dt class="text-xs font-medium text-gray-500 dark:text-gray-400">{{ 'attendanceShow.contact.email'|trans({}, 'admin') }}</dt>
                            <dd class="mt-0.5 text-sm font-semibold text-primary-700 dark:text-primary-300"><a href="mailto:{{ participant.email }}" class="hover:underline">{{ participant.email }}</a></dd>
                        </div>
                    {% endif %}
                {% endif %}
            </dl>
        </div>

        {# ── Angebot ── #}
        {% if offer %}
            <div class="border-t border-gray-100 dark:border-gray-800 px-4 py-5 sm:px-6">
                <h3 class="text-sm/6 font-medium text-gray-900 dark:text-gray-100">{{ 'attendances.label.offer'|trans({}, 'admin') }}</h3>
                <a href="{{ path('admin_offers_show', { uuid: offer.uuid.toBase58 }) }}" data-turbo-frame="slideover"
                   class="mt-3 flex items-start justify-between gap-3 rounded-xl border border-gray-200 bg-gray-50 p-3 transition hover:border-gray-300 dark:border-gray-700 dark:bg-gray-800/50 dark:hover:border-gray-600">
                    <div class="min-w-0">
                        <h4 class="truncate text-sm font-semibold text-gray-900 dark:text-gray-100">{{ offer.name }} (#{{ offer.id }})</h4>
                        <p class="text-xs text-gray-500 dark:text-gray-400">{{ offer.hosts|map(h => h.name)|join(', ') }}</p>
                        {% if offer.dates is not empty %}
                            <p class="mt-2 text-xs font-semibold text-gray-900 dark:text-gray-100"><twig:Cms:OfferDate :dates="offer.dates" short /></p>
                        {% endif %}
                        {% if offer.meetingPoint %}<p class="mt-0.5 text-xs text-gray-500 dark:text-gray-400">{{ offer.meetingPoint }}</p>{% endif %}
                    </div>
                    <twig:ux:icon name="ph:arrow-up-right" class="size-4 flex-none text-gray-400" />
                </a>
            </div>
        {% endif %}

        {# ── Aktivität (comments + status trail; same component as the participant page) ── #}
        {% if is_granted('ROLE_ADMIN') or is_granted('ROLE_PARTICIPANTS_ADMIN') %}
            <div class="border-t border-gray-100 dark:border-gray-800 px-4 py-5 sm:px-6">
                <twig:Admin:AttendanceActivity :item="attendance" :commentsOnly="false" />
            </div>
        {% endif %}

        {# ── Einwilligungen (editable) ── #}
        {% if this.consentStates is not empty %}
            <div class="border-t border-gray-100 dark:border-gray-800 px-4 py-5 sm:px-6">
                <div class="flex items-center gap-2">
                    <h3 class="text-sm/6 font-medium text-gray-900 dark:text-gray-100">{{ 'attendanceShow.consents.title'|trans({}, 'admin') }}</h3>
                    <span class="rounded-full bg-gray-100 px-2 text-xs font-semibold text-gray-500 dark:bg-gray-800 dark:text-gray-400">{{ this.consentStates|length }}</span>
                    <div class="ml-auto">
                        {% if editingConsents %}
                            <button type="button" data-action="live#action" data-live-action-param="cancelConsents" class="rounded-md px-2 py-1 text-xs font-semibold text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800">{{ 'attendanceShow.cancel'|trans({}, 'admin') }}</button>
                        {% else %}
                            <button type="button" data-action="live#action" data-live-action-param="editConsents" class="inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-xs font-semibold text-primary-700 hover:bg-primary-50 dark:text-primary-300 dark:hover:bg-primary-900/20">
                                <twig:ux:icon name="ph:pencil-simple" class="size-3.5" /> {{ 'attendanceShow.edit'|trans({}, 'admin') }}
                            </button>
                        {% endif %}
                    </div>
                </div>

                {% if editingConsents %}
                    <div class="mt-3 flex items-start gap-2.5 rounded-xl border border-amber-300 bg-amber-50 p-3 dark:border-amber-700/60 dark:bg-amber-900/20">
                        <twig:ux:icon name="ph:warning" class="mt-0.5 size-4 flex-none text-amber-600 dark:text-amber-400" />
                        <div class="text-xs leading-relaxed">
                            <b class="block font-bold text-amber-900 dark:text-amber-200">{{ 'attendanceShow.consents.legalTitle'|trans({}, 'admin') }}</b>
                            <span class="text-gray-600 dark:text-gray-300">{{ 'attendanceShow.consents.legalText'|trans({}, 'admin') }}</span>
                        </div>
                    </div>
                {% endif %}

                <div class="mt-2">
                    {% for state in this.consentStates %}
                        {% set form = state.consentForm %}
                        {% set cid = form.id ~ '' %}
                        {% set required = state.isCompulsory %}
                        {% set signed = state.isSigned %}
                        {% set revoked = state.isRejected or state.isRevoked %}
                        {% set signature = state.signature %}
                        <div class="border-t border-dashed border-gray-200 py-4 first:border-t-0 first:pt-0 dark:border-gray-700">
                            <div class="flex items-start justify-between gap-3">
                                <div class="min-w-0">
                                    <div class="flex flex-wrap items-center gap-x-2 gap-y-1 text-sm font-semibold text-gray-900 dark:text-gray-100">
                                        {{ form.title|default('attendances.consents.untitled'|trans({}, 'admin')) }}
                                        {% if required %}
                                            <span class="rounded px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wide text-red-700 bg-red-50 dark:text-red-300 dark:bg-red-900/30">{{ 'attendances.requirement.required'|trans({}, 'admin') }}</span>
                                        {% else %}
                                            <span class="rounded px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wide text-gray-600 bg-gray-100 dark:text-gray-300 dark:bg-gray-700">{{ 'attendances.requirement.optional'|trans({}, 'admin') }}</span>
                                        {% endif %}
                                        <span class="rounded px-1.5 py-0.5 text-[11px] font-semibold text-gray-500 bg-gray-100 dark:text-gray-400 dark:bg-gray-700">{{ (form.offer ? 'attendances.consents.source.offer' : 'attendances.consents.source.season')|trans({}, 'admin') }}</span>
                                    </div>
                                </div>
                                {% if signed %}
                                    <span class="inline-flex flex-none items-center gap-1 rounded-full bg-green-50 px-2.5 py-1 text-[11px] font-semibold text-green-700 dark:bg-green-900/20 dark:text-green-300"><twig:ux:icon name="ph:check" class="size-3" /> {{ 'attendanceShow.consents.state.granted'|trans({}, 'admin') }}</span>
                                {% elseif revoked %}
                                    <span class="inline-flex flex-none items-center rounded-full bg-red-50 px-2.5 py-1 text-[11px] font-semibold text-red-700 dark:bg-red-900/20 dark:text-red-300">{{ 'attendanceShow.consents.state.revoked'|trans({}, 'admin') }}</span>
                                {% else %}
                                    <span class="inline-flex flex-none items-center rounded-full bg-amber-50 px-2.5 py-1 text-[11px] font-semibold text-amber-700 dark:bg-amber-900/20 dark:text-amber-300">{{ 'attendanceShow.consents.state.open'|trans({}, 'admin') }}</span>
                                {% endif %}
                            </div>

                            {% if editingConsents %}
                                <div class="mt-3 grid grid-cols-2 gap-1 rounded-lg bg-gray-100 p-1 dark:bg-gray-700">
                                    <label class="flex cursor-pointer select-none items-center justify-center gap-1.5 rounded-md px-2 py-1.5 text-xs font-semibold text-gray-600 transition has-checked:bg-green-700 has-checked:text-white dark:text-gray-300">
                                        <input type="radio" name="consent_{{ cid }}" value="grant" data-model="consentDecisions.{{ cid }}" {% if consentDecisions[cid]|default == 'grant' %}checked{% endif %} class="sr-only">
                                        {{ 'attendanceShow.consents.grant'|trans({}, 'admin') }}
                                    </label>
                                    <label class="flex cursor-pointer select-none items-center justify-center gap-1.5 rounded-md px-2 py-1.5 text-xs font-semibold text-gray-600 transition has-checked:bg-red-700 has-checked:text-white dark:text-gray-300">
                                        <input type="radio" name="consent_{{ cid }}" value="revoke" data-model="consentDecisions.{{ cid }}" {% if consentDecisions[cid]|default == 'revoke' %}checked{% endif %} class="sr-only">
                                        {{ 'attendanceShow.consents.revoke'|trans({}, 'admin') }}
                                    </label>
                                </div>
                            {% endif %}

                            {# signee / provenance — name + date #}
                            {% if signed or revoked %}
                                {% set signee = signature ? (signature.signedBy ?: state.signeeName) : state.signeeName %}
                                <p class="mt-2 flex items-start gap-1.5 text-[11px] leading-relaxed text-gray-500 dark:text-gray-400">
                                    <twig:ux:icon name="ph:user" class="mt-px size-3.5 flex-none text-gray-400" />
                                    <span><b class="font-semibold text-gray-700 dark:text-gray-300">{{ (revoked ? 'attendanceShow.consents.revokedBy' : 'attendanceShow.consents.signedBy')|trans({ name: signee ?: 'attendanceShow.consents.unknownSignee'|trans({}, 'admin') }, 'admin') }}</b>{% if signature %} · {{ signature.createdAt|date('d.m.Y · H:i') }}{% endif %}</span>
                                </p>
                            {% else %}
                                <p class="mt-2 flex items-start gap-1.5 text-[11px] leading-relaxed text-gray-500 dark:text-gray-400">
                                    <twig:ux:icon name="ph:clock" class="mt-px size-3.5 flex-none text-gray-400" />
                                    <span>{{ 'attendanceShow.consents.notSignedYet'|trans({}, 'admin') }}</span>
                                </p>
                            {% endif %}
                        </div>
                    {% endfor %}
                </div>

                {% if editingConsents %}
                    <div class="mt-3 flex justify-end gap-2">
                        <button type="button" data-action="live#action" data-live-action-param="cancelConsents" class="rounded-md border border-gray-300 bg-white px-3 py-1.5 text-sm font-semibold text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700">{{ 'attendanceShow.cancel'|trans({}, 'admin') }}</button>
                        <button type="button" data-action="live#action" data-live-action-param="saveConsents" class="rounded-md bg-primary-600 px-3 py-1.5 text-sm font-semibold text-white hover:bg-primary-700">{{ 'attendanceShow.consents.save'|trans({}, 'admin') }}</button>
                    </div>
                {% endif %}
            </div>
        {% endif %}

        {# ── Zusatzfragen (editable) ── #}
        {% if this.questions is not empty %}
            <div class="border-t border-gray-100 dark:border-gray-800 px-4 py-5 sm:px-6">
                <div class="flex items-center gap-2">
                    <h3 class="text-sm/6 font-medium text-gray-900 dark:text-gray-100">{{ 'attendanceShow.questions.title'|trans({}, 'admin') }}</h3>
                    <span class="rounded-full bg-gray-100 px-2 text-xs font-semibold text-gray-500 dark:bg-gray-800 dark:text-gray-400">{{ this.questions|length }}</span>
                    <div class="ml-auto">
                        {% if editingQuestions %}
                            <button type="button" data-action="live#action" data-live-action-param="cancelQuestions" class="rounded-md px-2 py-1 text-xs font-semibold text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800">{{ 'attendanceShow.cancel'|trans({}, 'admin') }}</button>
                        {% else %}
                            <button type="button" data-action="live#action" data-live-action-param="editQuestions" class="inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-xs font-semibold text-primary-700 hover:bg-primary-50 dark:text-primary-300 dark:hover:bg-primary-900/20">
                                <twig:ux:icon name="ph:pencil-simple" class="size-3.5" /> {{ 'attendanceShow.edit'|trans({}, 'admin') }}
                            </button>
                        {% endif %}
                    </div>
                </div>

                <div class="mt-2">
                    {% for q in this.questions %}
                        {% set qid = q.uuid %}
                        {% set answered = q.answer is not empty %}
                        <div class="border-t border-dashed border-gray-200 py-4 first:border-t-0 first:pt-0 dark:border-gray-700">
                            <div class="flex flex-wrap items-center gap-x-2 gap-y-1 text-sm font-semibold text-gray-900 dark:text-gray-100">
                                {{ q.question }}
                                {% if q.required %}
                                    <span class="rounded px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wide text-red-700 bg-red-50 dark:text-red-300 dark:bg-red-900/30">{{ 'attendances.requirement.required'|trans({}, 'admin') }}</span>
                                {% else %}
                                    <span class="rounded px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wide text-gray-600 bg-gray-100 dark:text-gray-300 dark:bg-gray-700">{{ 'attendances.requirement.optional'|trans({}, 'admin') }}</span>
                                {% endif %}
                            </div>

                            {% if editingQuestions %}
                                <div class="mt-2.5">
                                    {% if q.type == 'yn' %}
                                        {% set answer = answers[qid]|default(q.answer) %}
                                        <div class="grid grid-cols-2 gap-1 rounded-lg bg-gray-100 p-1 dark:bg-gray-700">
                                            <label class="flex cursor-pointer select-none items-center justify-center gap-1.5 rounded-md px-2 py-1.5 text-sm font-semibold text-gray-600 transition has-checked:bg-green-700 has-checked:text-white dark:text-gray-300">
                                                <input type="radio" name="q_{{ qid }}" value="y" data-model="norender|answers.{{ qid }}" {% if answer == 'y' %}checked{% endif %} class="sr-only">{{ 'attendances.questions.yes'|trans({}, 'admin') }}
                                            </label>
                                            <label class="flex cursor-pointer select-none items-center justify-center gap-1.5 rounded-md px-2 py-1.5 text-sm font-semibold text-gray-600 transition has-checked:bg-gray-800 has-checked:text-white dark:text-gray-300 dark:has-checked:bg-gray-200 dark:has-checked:text-gray-900">
                                                <input type="radio" name="q_{{ qid }}" value="n" data-model="norender|answers.{{ qid }}" {% if answer == 'n' %}checked{% endif %} class="sr-only">{{ 'attendances.questions.no'|trans({}, 'admin') }}
                                            </label>
                                        </div>
                                    {% elseif q.type == 'int' %}
                                        <input type="number" step="1" data-model="norender|answers.{{ qid }}" value="{{ answers[qid]|default(q.answer) }}" placeholder="{{ 'attendances.questions.answerPlaceholder'|trans({}, 'admin') }}"
                                               class="block w-full max-w-40 rounded-md border-0 py-2 text-sm text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary-600 dark:bg-gray-900 dark:text-gray-100 dark:ring-gray-600">
                                    {% else %}
                                        <input type="text" data-model="norender|answers.{{ qid }}" value="{{ answers[qid]|default(q.answer) }}" placeholder="{{ 'attendances.questions.answerPlaceholder'|trans({}, 'admin') }}"
                                               class="block w-full rounded-md border-0 py-2 text-sm text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary-600 dark:bg-gray-900 dark:text-gray-100 dark:ring-gray-600">
                                    {% endif %}
                                </div>
                            {% else %}
                                {% if answered %}
                                    <p class="mt-1.5 flex items-center gap-1.5 text-sm font-semibold text-gray-900 dark:text-gray-100">
                                        <twig:ux:icon name="ph:check" class="size-4 flex-none text-green-600 dark:text-green-400" />
                                        {% if q.type == 'yn' %}{{ (q.answer == 'y' ? 'attendances.questions.yes' : 'attendances.questions.no')|trans({}, 'admin') }}{% else %}{{ q.answer }}{% endif %}
                                    </p>
                                {% else %}
                                    <p class="mt-1.5 text-sm italic text-gray-400 dark:text-gray-500">{{ 'attendanceShow.questions.unanswered'|trans({}, 'admin') }}</p>
                                {% endif %}
                            {% endif %}
                        </div>
                    {% endfor %}
                </div>

                {% if editingQuestions %}
                    <div class="mt-3 flex justify-end gap-2">
                        <button type="button" data-action="live#action" data-live-action-param="cancelQuestions" class="rounded-md border border-gray-300 bg-white px-3 py-1.5 text-sm font-semibold text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700">{{ 'attendanceShow.cancel'|trans({}, 'admin') }}</button>
                        <button type="button" data-action="live#action" data-live-action-param="saveQuestions" class="rounded-md bg-primary-600 px-3 py-1.5 text-sm font-semibold text-white hover:bg-primary-700">{{ 'attendanceShow.questions.save'|trans({}, 'admin') }}</button>
                    </div>
                {% endif %}
            </div>
        {% endif %}

        <div class="h-2"></div>
    </div>

    {# ── footer ── #}
    <div class="shrink-0 border-t border-gray-200 dark:border-gray-800 px-4 py-4 sm:px-6 flex items-center justify-between gap-3">
        <a href="{{ path('admin_participants_attendances_status', { ids: [attendance.id] }) }}" data-turbo-frame="slideover"
           class="inline-flex items-center gap-1.5 rounded-md border border-gray-300 bg-white px-3 py-2 text-sm font-semibold text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700">
            <twig:ux:icon name="ph:flag" class="size-4" />
            {{ 'attendance.action.status'|trans({}, 'admin') }}
        </a>
        {% if this.canWithdraw %}
            <button type="button"
                    data-action="live#action" data-live-action-param="withdraw"
                    class="rounded-md border border-red-300 bg-white px-3.5 py-2 text-sm font-semibold text-red-700 hover:bg-red-50 dark:border-red-700/60 dark:bg-transparent dark:text-red-400 dark:hover:bg-red-900/20">
                {{ 'attendanceShow.withdraw'|trans({}, 'admin') }}
            </button>
        {% endif %}
    </div>

</div>
