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

{% block main %}

  {# `edition` (Edition entity) scopes the page to one Ferienpass edition —
     suppresses the participant-wide dob/account banner and the "Aktivität"
     section, and filters the Anmeldungen list to attendances of that edition.
     When unset, the page behaves as the unscoped participant view.

     The public `?saison=…` query param keeps the user-facing label; the
     template variable matches the DB-side entity name. #}
  {% set editionAttendances = edition is not null
      ? item.attendances|filter(a => a.offer.edition is not null and a.offer.edition.id == edition.id)
      : item.attendances %}

  <div class="p-4 sm:p-6 @lg:p-0 grid grid-cols-1 @lg:grid-cols-3 gap-8">
    <div class="{{ edition is not null ? '@lg:col-span-3' : '@lg:col-span-2' }}">
      <twig:Admin:Participant:Header participant="{{ item }}"/>
      {% if edition is null %}
        <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 %}

      <div class="space-y-8">
            {% if not commentsOnly and editionAttendances is not empty %}
              <div class="py-3 @lg:pt-6 @lg:pb-0">
                <h2 class="text-lg font-medium text-gray-900 dark:text-white">Anmeldungen</h2>

                {# 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 edition is not null %}
                  <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', { uuid: item.uuid.toBase58, saison: edition.alias }) }}"
                       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>
                      {{ edition.name ?: edition.alias }}
                    </a>
                    <a href="{{ path('admin_participants_show', { uuid: item.uuid.toBase58 }) }}"
                       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 %}

                <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 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 />
                            {% else %}
                              Dauerangebot
                            {% endif %}
                          </span>
                        </p>
                        <div>
                          <twig:Admin:Badge attendance="{{ attendance.status }}" size="sm" />
                        </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>
              </div>
            {% endif %}

            {# Payment receipts #}
            {% if payments|length %}
              <div class="py-3">
                <h2 class="text-lg font-medium text-gray-900 dark:text-white">Zahlungsbelege</h2>
                <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" />
                          {% 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>
              </div>
            {% endif %}
          </div>
      {% if edition is null and (is_granted('ROLE_ADMIN') or is_granted('ROLE_PARTICIPANTS_ADMIN')) %}
        <section aria-labelledby="activity-title" class="mt-8 @lg:mt-10">
          <div>
            <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">
                <twig:Admin:ParticipantActivity item="{{ item }}" :commentsOnly="commentsOnly"/>
              </div>
            </div>
          </div>
        </section>
      {% endif %}
    </div>

    {% if edition is null %}
      <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 %}
