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

{% block main %}

    <div class="p-4 sm:p-6 @lg:p-0 grid grid-cols-1 @5xl:grid-cols-3 gap-8">
      <div class="@5xl:col-span-2">
        <twig:Admin:Account:Header user="{{ item }}"/>
        <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">
              <span>{{ item.roles|filter(r => r in ['ROLE_HOST', 'ROLE_ADMIN', 'ROLE_MEMBER'])|map(r => ("accounts.#{r}")|trans)|join(', ') }}</span>
            </p>
          </div>
        </div>

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

        <div class="space-y-8">
            {% if not commentsOnly and item.participants is not empty %}
              <div class="py-3 @5xl:pt-6 @5xl:pb-0">
                <h2 class="text-lg font-medium text-gray-900 dark:text-white">Teilnehmende</h2>
                <ul role="list" class="mt-4 divide-y divide-gray-100 dark:divide-white/5 overflow-hidden bg-white dark:bg-white/5 shadow-xs outline-1 outline-gray-900/5 dark:outline-white/10 sm:rounded-xl">
                  {% for participant in item.participants %}
                    <li class="relative flex justify-between gap-x-6 px-4 py-5 hover:bg-gray-50 dark:hover:bg-white/5 sm:px-6">
                      <div class="flex min-w-0 gap-x-4">
                        <span class="inline-flex size-10 flex-none items-center justify-center rounded-full bg-gray-500">
                          <span class="text-sm font-medium leading-none text-white">{{ participant.firstname|first|upper ~ participant.lastname|first|upper }}</span>
                        </span>
                        <div class="min-w-0 flex-auto">
                          <p class="text-sm/6 font-semibold text-gray-900 dark:text-white">
                            <a href="{{ path('admin_participants_show', { uuid: participant.uuid.toBase58}) }}" data-turbo-frame="_top">
                              <span class="absolute inset-x-0 -top-px bottom-0"></span>
                              {{ participant.name }}
                            </a>
                          </p>
                          <p class="mt-1 flex text-xs/5 text-gray-500 dark:text-gray-400">
                            {{ participant.dateOfBirth ? participant.dateOfBirth|date('d.m.Y') : '' }}
                          </p>
                        </div>
                      </div>
                      <div class="flex shrink-0 items-center gap-x-4">
                        <div class="hidden sm:flex sm:flex-col sm:items-end">
                          <div class="flex items-center space-x-2 shrink-0">
                            {% if participant.attendancesConfirmed|length %}
                              <span class="text-green-600 font-medium text-xs">{{ participant.attendancesConfirmed|length }}</span>
                            {% else %}
                              <span class="text-gray-500 font-medium text-xs">0</span>
                            {% endif %}
                            <div class="w-24 shrink-0 bg-gray-200 dark:bg-gray-200/50 rounded-full h-1.5 overflow-hidden flex">
                              {% if participant.attendancesNotWithdrawn|length %}
                                <div class="bg-green-600 dark:bg-green-600/70 h-1.5" title="zugelassen: {{ participant.attendancesConfirmed(false)|length }}" style="width: {{ (participant.attendancesConfirmed(false)|length)/participant.attendancesNotWithdrawn|length*100 }}%"></div>
                                <div class="bg-yellow-500 dark:bg-yellow-500/70 h-1.5" title="Warteliste: {{ participant.attendancesWaitlisted(false)|length }}" style="width: {{ (participant.attendancesWaitlisted(false)|length)/participant.attendancesNotWithdrawn|length*100 }}%"></div>
                                <div class="bg-red-600 dark:bg-red-600/70 h-1.5" title="fehlerhaft: {{ participant.attendancesRejected|length }}" style="width: {{ (participant.attendancesRejected|length)/participant.attendancesNotWithdrawn|length*100 }}%"></div>
                                <div class="bg-red-600 dark:bg-red-600/70 h-1.5" title="ohne Platz: {{ participant.attendancesUnfulfilled|length }}" style="width: {{ (participant.attendancesUnfulfilled|length)/participant.attendancesNotWithdrawn|length*100 }}%"></div>
                                <div class="bg-gray-600 dark:bg-gray-100/70 h-1.5" title="wartend: {{ participant.attendancesWaiting(false)|length }}" style="width: {{ (participant.attendancesWaiting(false)|length)/participant.attendancesNotWithdrawn|length*100 }}%"></div>
                              {% endif %}
                            </div>
                            <span class="text-gray-500 font-medium text-xs">{{ participant.attendancesNotWithdrawn|length }}</span>
                          </div>
                        </div>
                        <twig:ux:icon name="ph:caret-right" aria-hidden="true" class="size-5 flex-none text-gray-400" />
                      </div>
                    </li>
                  {% endfor %}
                </ul>
              </div>
            {% endif %}
            {% if not commentsOnly and item.hosts is not empty %}
              <div class="py-3">
                <h2 class="text-lg font-medium text-gray-900 dark:text-white">Veranstaltende</h2>
                <ul role="list" class="mt-4 divide-y divide-gray-100 dark:divide-white/5 overflow-hidden bg-white dark:bg-white/5 shadow-xs outline-1 outline-gray-900/5 dark:outline-white/10 sm:rounded-xl">
                  {% for host in item.hosts %}
                    <li class="relative flex justify-between gap-x-6 px-4 py-5 hover:bg-gray-50 dark:hover:bg-white/5 sm:px-6">
                      <div class="flex min-w-0 gap-x-4">
                        <span class="inline-flex size-10 flex-none items-center justify-center rounded-full bg-gray-500">
                          <span class="text-sm font-medium leading-none text-white">{{ host.name|first|upper }}</span>
                        </span>
                        <div class="min-w-0 flex-auto">
                          <p class="text-sm/6 font-semibold text-gray-900 dark:text-white">
                            <a href="{{ path('admin_hosts_show', { uuid: host.uuid.toBase58}) }}" data-turbo-frame="_top">
                              <span class="absolute inset-x-0 -top-px bottom-0"></span>
                              {{ host.name }}
                            </a>
                          </p>
                          <p class="mt-1 flex text-xs/5 text-gray-500 dark:text-gray-400">
                            {{ host.email }}
                          </p>
                        </div>
                      </div>
                      <div class="flex shrink-0 items-center gap-x-4">
                        <div class="hidden sm:flex sm:flex-col sm:items-end">
                          <p class="text-sm/6 text-gray-900 dark:text-gray-100">{{ host.offers|length }} Angebote</p>
                        </div>
                        <twig:ux:icon name="ph:caret-right" aria-hidden="true" class="size-5 flex-none text-gray-400" />
                      </div>
                    </li>
                  {% endfor %}
                </ul>
              </div>

              {% if 'ROLE_HOST' in item.roles %}
                {% set team_members = [] %}
                {% for host in item.hosts %}
                  {% for member in host.getUsers() %}
                    {% if member.id != item.id %}
                      {% set is_already_in = false %}
                      {% for tm in team_members %}
                        {% if tm.id == member.id %}{% set is_already_in = true %}{% endif %}
                      {% endfor %}
                      {% if not is_already_in %}
                        {% set team_members = team_members|merge([member]) %}
                      {% endif %}
                    {% endif %}
                  {% endfor %}
                {% endfor %}

                {% if team_members is not empty %}
                  <div class="py-3">
                    <h2 class="text-lg font-medium text-gray-900 dark:text-white">Team-Mitglieder</h2>
                    <ul role="list" class="mt-4 divide-y divide-gray-100 dark:divide-white/5 overflow-hidden bg-white dark:bg-white/5 shadow-xs outline-1 outline-gray-900/5 dark:outline-white/10 sm:rounded-xl">
                      {% for member in team_members %}
                        <li class="relative flex justify-between gap-x-6 px-4 py-5 hover:bg-gray-50 dark:hover:bg-white/5 sm:px-6">
                          <div class="flex min-w-0 gap-x-4">
                            <span class="inline-flex size-10 flex-none items-center justify-center rounded-full bg-gray-500">
                              <span class="text-sm font-medium leading-none text-white">{{ member.firstname|first|upper ~ member.lastname|first|upper }}</span>
                            </span>
                            <div class="min-w-0 flex-auto">
                              <p class="text-sm/6 font-semibold text-gray-900 dark:text-white">
                                <a href="{{ path('admin_accounts_show', { uuid: member.uuid.toBase58}) }}" data-turbo-frame="_top">
                                  <span class="absolute inset-x-0 -top-px bottom-0"></span>
                                  {{ member.name }}
                                </a>
                              </p>
                              <p class="mt-1 flex text-xs/5 text-gray-500 dark:text-gray-400">
                                {{ member.email }}
                              </p>
                            </div>
                          </div>
                          <div class="flex shrink-0 items-center gap-x-4">
                            <twig:ux:icon name="ph:caret-right" aria-hidden="true" class="size-5 flex-none text-gray-400" />
                          </div>
                        </li>
                      {% endfor %}
                    </ul>
                  </div>
                {% endif %}
              {% endif %}
            {% endif %}
            {% if not commentsOnly and messages is not empty %}
              <div class="py-3">
                <h2 class="text-lg font-medium text-gray-900 dark:text-white">Nachrichten</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 message in messages %}
                    <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 py-0.5 -mx-1 -my-0.5 transition-colors text-sm font-medium text-gray-900 dark:text-white">{{ message.subject }}</span>
                          <span class="block text-gray-500 dark:text-gray-400 text-xs">{{ message.createdAt|default ? message.createdAt|ago : "" }}</span>
                        </p>
                        <div>
                          {% if message.clicked %}
                            <twig:Admin:Badge color="teal" size="sm">{{ 'notificationEngagement.click'|trans }}</twig:Admin:Badge>
                          {% elseif message.opened %}
                            <twig:Admin:Badge color="sky" size="sm">{{ 'notificationEngagement.open'|trans }}</twig:Admin:Badge>
                          {% elseif message.bounced %}
                            <twig:Admin:Badge color="red" size="sm">{{ 'notificationEngagement.bounce'|trans }}</twig:Admin:Badge>
                          {% elseif message.dropped %}
                            <twig:Admin:Badge color="red" size="sm">{{ 'notificationEngagement.dropped'|trans }}</twig:Admin:Badge>
                          {% elseif message.delivered %}
                            <twig:Admin:Badge color="slate" size="sm">{{ 'notificationEngagement.delivered'|trans }}</twig:Admin:Badge>
                          {% endif %}
                        </div>
                        <a href="{{ path('admin_outbox', { message: message.id }) }}" data-turbo-frame="_top" class="absolute inset-0"></a>
                      </div>
                    </li>
                  {% endfor %}
                </ul>
              </div>
            {% endif %}
          </div>
      <section aria-labelledby="activity-title" class="mt-8 @5xl:mt-10">
        <twig:Admin:AccountActivity item="{{ item }}" :commentsOnly="commentsOnly"/>
      </section>
    </div>

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

{% block details %}
  <h2 class="sr-only">Details</h2>
  <dl class="space-y-4 @lg:space-y-8">
    <div>
      <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Kontakt</dt>
      <dd class="mt-1 text-sm text-gray-900 dark:text-gray-100">
        {% if item.phone %}<div>{{ item.phone }}</div>{% endif %}
        {% if item.mobile %}<div>{{ item.mobile }}</div>{% endif %}
        {% if item.email %}<div>{{ item.email }}</div>{% endif %}
      </dd>
    </div>
    <div>
      <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Postanschriften</dt>
      <dd class="mt-1 text-sm text-gray-900 dark:text-gray-100 space-y-3">
        {% for address in item.postalAddresses %}
          <div>
            <div>{{ address.street }}</div>
            <div>{{ address.postalCode }} {{ address.city }}</div>
            <div>{{ address.country }}</div>
          </div>
        {% else %}
          <div>-</div>
        {% endfor %}
      </dd>
    </div>

    {# Actions #}
    {% set actionsMenu = list_actions(item) %}
    {% set actions = actionsMenu.children|filter(a => a.displayed and a.name in ['impersonate','password','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 %}
