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

{% block main %}

  <div class="p-4 sm:p-6 @lg:p-0 grid grid-cols-1 @lg:grid-cols-3 gap-8">
    <div class="@lg:col-span-2">
      <twig:Admin:Participant:Header participant="{{ item.participant }}"/>
      <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">
            Angebot: <a href="{{ path('admin_offers_show', { uuid: item.offer.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="slideover">{{ item.offer.name }}</a>
          </p>
          <p class="mt-1 text-sm text-gray-500">Status: <twig:Admin:Badge attendance="{{ item.status }}" size="sm" /></p>
        </div>
      </div>

            {% if 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 (Anmeldung)</h2>
                    </div>
                    <div class="pt-6">
                      <twig:Admin:AttendanceActivity item="{{ item }}" :commentsOnly="commentsOnly"/>
                    </div>
                  </div>
                </div>
              </section>
            {% endif %}
    </div>
  </div>
{% endblock %}
