{% extends "@FerienpassAdmin/layout/slideOverBase.html.twig" %}
{% trans_default_domain 'admin' %}
{% set title = item.name %}

{% macro section_summary(title) %}
  {# Headline left, toggle right, both on the summary line so the whole row is the
     control. `list-none` plus the webkit marker rule removes the native triangle.
     The variants are UNNAMED `group-open:` on purpose: each summary sits inside its
     own `<details class="group">`, and a name built by interpolation would never
     reach Tailwind's scanner. #}
  <summary class="flex cursor-pointer list-none items-center justify-between gap-x-3 [&::-webkit-details-marker]:hidden">
    <h2 class="text-lg font-medium text-gray-900 dark:text-white">{{ title }}</h2>
    <span class="inline-flex flex-none items-center gap-x-1 text-xs font-semibold text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100">
      <span class="group-open:hidden">Anzeigen</span>
      <span class="hidden group-open:inline">Ausblenden</span>
      <twig:ux:icon name="ph:caret-down" class="size-4 transition-transform group-open:rotate-180" />
    </span>
  </summary>
{% endmacro %}

{% import _self as ui %}

{% block main %}

  {# `editions` (Edition entities, possibly empty) scopes the Anmeldungen list
     to those Ferienpass editions and shows the tab strip that switches back to
     the all-time view. `compact` is the separate, opt-in review layout that
     drops the participant-wide chrome (dob/account banner, details aside,
     "Aktivität") — OfferAssign's side panel wants it, the participants list
     does not.

     The public `?saison=…`/`?kompakt=…` query params keep the user-facing
     labels; the template variables match the DB-side entity names. #}
  {% set editionIds = editions|default([])|map(e => e.id) %}
  {% set editionAttendances = editionIds
      ? item.attendances|filter(a => a.offer.edition is not null and a.offer.edition.id in editionIds)
      : item.attendances %}

  <div class="p-4 sm:p-6 @lg:p-0 grid grid-cols-1 @lg:grid-cols-3 gap-8">
    <div class="{{ compact ? '@lg:col-span-3' : '@lg:col-span-2' }}">
      <twig:Admin:Participant:Header participant="{{ item }}"/>
      {% if not compact %}
        <div class="flex flex-col @lg:flex-row @lg:items-center @lg:justify-between @lg:space-x-4 border-b pb-6 border-gray-200 dark:border-gray-800">
          <div>
            <p class="text-sm text-gray-500">
              {% if item.user %}
                Konto: <a href="{{ path('admin_accounts_show', { uuid: item.user.uuid.toBase58 }) }}" class="hover:bg-gray-200/75 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-gray-100 rounded-md px-1.5 py-1 -mx-1.5 -my-1 transition-colors font-medium text-gray-900 dark:text-gray-100" data-turbo-frame="_top">{{ item.user.name }}</a>
              {% else %}
                Ohne verknüpftes Konto
              {% endif %}
            </p>
            {% if item.dateOfBirth %}
              <p class="mt-1 text-sm text-gray-500">Geburtsdatum: <time datetime="{{ item.dateOfBirth|date('c') }}">{{ item.dateOfBirth|date('d.m.Y') }}</time></p>
            {% endif %}
          </div>
        </div>

        <div class="mt-4 @lg:hidden">
          {{ block('details') }}
        </div>
      {% endif %}

      {# Opened from one application (`?anmeldung=`)? Then THAT is what the page is
         about: the conversation belongs to the application, and the participant's
         other registrations, receipts and history collapse behind a toggle instead
         of burying it. `?alle=1` widens back out. #}
      {% set attendance = attendance|default(null) %}
      {% set scoped = attendance is not null and not showAll|default(false) %}
      {% set scopeParams = { uuid: item.uuid.toBase58 }|merge(attendance ? { anmeldung: attendance.uuid.toBase58 } : {})|merge(compact ? { kompakt: 1 } : {}) %}

      <div class="space-y-8">
            {# Kommentare + Verlauf come FIRST: what the team needs on opening a
               participant is the running conversation about them — a note from a
               colleague, the reply a parent sent — not the list of registrations,
               which is reference material they scroll to. #}
            {% if not compact and (is_granted('ROLE_ADMIN') or is_granted('ROLE_PARTICIPANTS_ADMIN')) %}
              <section aria-labelledby="activity-title" class="pt-6">
                <div class="divide-y divide-gray-200 dark:divide-white/10">
                  <div class="pb-4">
                    <h2 id="activity-title" class="text-lg font-medium text-gray-900 dark:text-white">Aktivität</h2>
                  </div>
                  <div class="pt-6">
                    {# The scope switch is handed to the feed, which renders it in line
                       with its topmost date divider. #}
                    {% set feedAction = attendance ? {
                      url: path('admin_participants_show', scoped ? scopeParams|merge({ alle: 1 }) : scopeParams),
                      label: scoped ? 'Alle Aktivitäten anzeigen' : 'Nur diese Anmeldung',
                      icon: scoped ? 'ph:arrows-out-simple' : 'ph:arrows-in-simple',
                    } : {} %}

                    {% if scoped %}
                      {# Attendance-scoped: the composer posts into THIS application's
                         thread, which is also what makes "Anmelde-Details mitschicken"
                         available on it. #}
                      <twig:Admin:AttendanceActivity :item="attendance" :commentsOnly="commentsOnly" :feedAction="feedAction"/>
                    {% else %}
                      <twig:Admin:ParticipantActivity item="{{ item }}" :commentsOnly="commentsOnly" :feedAction="feedAction"/>
                    {% endif %}
                  </div>
                </div>
              </section>
            {% endif %}

            {# Both headings stay visible — a collapsed section still has to say what
               it is. Each carries its own inline toggle and is open unless the page
               is scoped to one application. A plain <details> does the work, so this
               keeps functioning without JavaScript. #}
            {% if not commentsOnly and (editionAttendances is not empty or editionIds is not empty) %}
              <details class="group py-3 @lg:pt-6 @lg:pb-0" {{ scoped ? '' : 'open' }}>
                {{ ui.section_summary('Anmeldungen') }}

                {# Tab switch between the edition-scoped view and the all-time
                   view. Only shown when an edition is active (without it there's
                   nothing to switch to — the list already shows everything). #}
                {% if editionIds is not empty %}
                  {% set saisonParams = { uuid: item.uuid.toBase58, saison: editions|map(e => e.alias)|join('+') }|merge(compact ? { kompakt: 1 } : {}) %}
                  <nav class="mt-3 -mb-px flex gap-x-6 border-b border-gray-200 dark:border-white/10" aria-label="Anmeldungen filter">
                    <a href="{{ path('admin_participants_show', saisonParams) }}"
                       data-turbo-frame="slideover"
                       class="flex items-center gap-x-1.5 border-b-2 border-primary-600 px-1 pb-2 text-sm font-medium text-primary-600 dark:text-primary-400 dark:border-primary-400"
                       aria-current="page">
                      <span class="h-4 w-4">{{ ux_icon('ph:calendar-blank') }}</span>
                      {{ editions|length == 1 ? (editions[0].name ?: editions[0].alias) : editions|length ~ ' Saisons' }}
                    </a>
                    <a href="{{ path('admin_participants_show', { uuid: item.uuid.toBase58 }|merge(compact ? { kompakt: 1 } : {})) }}"
                       data-turbo-frame="slideover"
                       class="flex items-center gap-x-1.5 border-b-2 border-transparent px-1 pb-2 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:text-gray-400 dark:hover:border-gray-700 dark:hover:text-gray-200">
                      <span class="h-4 w-4">{{ ux_icon('ph:list') }}</span>
                      Alle
                    </a>
                  </nav>
                {% endif %}

                {% if editionAttendances is empty %}
                  <p class="mt-4 text-sm text-gray-500 dark:text-gray-400">Keine Anmeldungen in dieser Auswahl.</p>
                {% endif %}

                <ul role="list" class="mt-4 divide-y divide-gray-200 dark:divide-white/10 {{ editionAttendances is empty ? '' : 'border-b border-t border-gray-200 dark:border-white/10' }}">
                  {% for attendance in editionAttendances %}
                    <li class="py-3 relative group">
                      <div class="flex items-center justify-between">
                        <p>
                          <span class="block group-hover:bg-gray-100 dark:group-hover:bg-gray-900/50 group-hover:text-gray-900 dark:group-hover:text-gray-100 rounded-md px-1.5 py-1 -mx-1.5 -my-1 transition-colors text-sm font-medium text-gray-900 dark:text-white">{{ attendance.offer.name }}</span>
                          <span class="block text-gray-500 dark:text-gray-400 text-xs">
                            {% if attendance.offer.dates is not empty %}
                              <twig:Cms:OfferDate :dates="attendance.offer.dates" short />{% if attendance.offer.dateBegin %} · {{ attendance.offer.dateBegin|date('Y') }}{% endif %}
                            {% else %}
                              Dauerangebot
                            {% endif %}
                          </span>
                        </p>
                        <div>
                          <twig:Admin:Badge attendance="{{ attendance.status }}" size="sm" dot />
                        </div>
                        <a href="{{ path('admin_offer_assign', { uuid: attendance.offer.uuid.toBase58 }) }}" data-turbo-frame="_top" class="absolute inset-0"></a>
                      </div>
                    </li>
                  {% endfor %}
                </ul>
              </details>
            {% endif %}

            {# Payment receipts #}
            {% if payments|length %}
              <details class="group py-3" {{ scoped ? '' : 'open' }}>
                {{ ui.section_summary('Zahlungsbelege') }}
                <ul role="list" class="mt-4 divide-y divide-gray-200 dark:divide-white/10 border-b border-t border-gray-200 dark:border-white/10">
                  {% for payment in payments %}
                    {%- set label = 'participants.action.show_payment'|trans({'number': payment.receiptNumber}) -%}
                    <li class="py-3 relative group">
                      <div class="flex items-center justify-between">
                        <p>
                          <span class="block group-hover:bg-gray-100 dark:group-hover:bg-gray-900/50 group-hover:text-gray-900 dark:group-hover:text-gray-100 rounded-md px-1.5 py-1 -mx-1.5 -my-1 transition-colors text-sm font-medium text-gray-900 dark:text-white">{{ label }}</span>
                          <span class="block text-gray-500 dark:text-gray-400 text-xs">
                            {{ (payment.totalAmount / 100)|format_currency('EUR', locale='de') }}
                          </span>
                        </p>
                        <twig:Admin:Badge payment="{{ payment.status }}" size="sm" dot />
                          {% if payment.uuid.toString() != '00000000-0000-0000-0000-000000000000' %}
                        <a href="{{ path('admin_payments_receipt', { uuid: payment.uuid.toBase58 }) }}"
                           class="absolute inset-0"></a>
                          {% endif %}
                      </div>
                    </li>
                  {% endfor %}
                </ul>
              </details>
            {% endif %}
          </div>
    </div>

    {% if not compact %}
      <aside class="hidden @lg:block @lg:pl-8 @lg:border-l @lg:border-gray-200 @lg:dark:border-gray-800">
        {{ block('details') }}
      </aside>
    {% endif %}
  </div>
{% endblock %}

{% block details %}
  <h2 class="sr-only">Details</h2>
  <dl class="space-y-4 @lg:space-y-8">
    {% if item.dateOfBirth %}
      <div>
        <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Geburtsdatum</dt>
        <dd class="mt-1 text-sm text-gray-900 dark:text-gray-100">
          <time datetime="{{ item.dateOfBirth|date('c') }}">{{ item.dateOfBirth|date('d.m.Y') }}</time>
        </dd>
      </div>
    {% endif %}
    {% if item.user %}
      <div>
        <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Konto</dt>
        <dd class="mt-1 text-sm text-gray-900 dark:text-gray-100">
          <a href="{{ path('admin_accounts_show', { uuid: item.user.uuid.toBase58 }) }}" class="hover:bg-gray-200/75 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-gray-100 rounded-md px-1.5 py-1 -mx-1.5 -my-1 transition-colors font-medium text-gray-900 dark:text-gray-100" data-turbo-frame="_top">{{ item.user.name }}</a>
        </dd>
      </div>
    {% endif %}

    {# Actions #}
    {% set actionsMenu = list_actions(item) %}
    {% set actions = actionsMenu.children|filter(a => a.displayed and a.name in ['delete']) %}
    {% if actions|length %}
      <div class="hidden @lg:block pt-6 border-t border-gray-200 dark:border-gray-800">
        <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Aktionen</dt>
        <dd class="mt-2">
          <div class="flex flex-col gap-2">
            {% import '@KnpMenu/menu.html.twig' as knp_menu %}
            {% for action in actions %}
              {%- set label = action.label|trans(action.extra('translation_params', {})) -%}
              <a href="{{ action.uri }}"
                 {{ action.extra('attr')|default([])|map((value, key) => "#{key}=\"#{value}\"")|join(" ")|raw }}
                 {{ knp_menu.attributes(action.linkAttributes) }}
                 class="text-sm font-semibold leading-6 text-gray-900 dark:text-white {{ action.name == 'delete' ? 'hover:text-red-600 dark:hover:text-red-400' : 'hover:text-primary-600 dark:hover:text-primary-400' }}">
                {{ label }} <span aria-hidden="true">&rarr;</span>
              </a>
            {% endfor %}
          </div>
        </dd>
      </div>
    {% endif %}
  </dl>
{% endblock %}
