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

{% block main %}
  <div class="relative isolate overflow-hidden -mx-4 px-4 sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8">
    <twig:Admin:Edition:Header edition="{{ edition }}"/>

    {# Stats #}
    <div class="border-b border-b-gray-900/10 lg:border-t lg:border-t-gray-900/5 dark:border-b-white/10 dark:lg:border-t-white/5">
      <dl class="mx-auto grid max-w-7xl grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 lg:px-2 xl:px-0">
        <div class="flex flex-wrap items-baseline justify-between gap-x-4 gap-y-2 border-t border-gray-900/5 px-4 py-10 sm:px-6 lg:border-t-0 xl:px-8 dark:border-white/5">
          <dt class="text-sm/6 font-medium text-gray-500 dark:text-gray-400">Veranstaltende</dt>
          <dd class="w-full flex-none text-3xl/10 font-medium tracking-tight text-gray-900 dark:text-white">{{ hostsCount }}</dd>
        </div>
        <div class="flex flex-wrap items-baseline justify-between gap-x-4 gap-y-2 border-t border-gray-900/5 px-4 py-10 sm:border-l sm:px-6 lg:border-t-0 xl:px-8 dark:border-white/5">
          <dt class="text-sm/6 font-medium text-gray-500 dark:text-gray-400">Angebote</dt>
          <dd class="w-full flex-none text-3xl/10 font-medium tracking-tight text-gray-900 dark:text-white">{{ offersCount }}</dd>
        </div>
        <div class="flex flex-wrap items-baseline justify-between gap-x-4 gap-y-2 border-t border-gray-900/5 px-4 py-10 sm:px-6 lg:border-t-0 lg:border-l xl:px-8 dark:border-white/5">
          <dt class="text-sm/6 font-medium text-gray-500 dark:text-gray-400">Anmeldungen</dt>
          <dd class="w-full flex-none text-3xl/10 font-medium tracking-tight text-gray-900 dark:text-white">{{ attendancesCount }}</dd>
        </div>
        <div class="flex flex-wrap items-baseline justify-between gap-x-4 gap-y-2 border-t border-gray-900/5 px-4 py-10 sm:border-l sm:px-6 lg:border-t-0 xl:px-8 dark:border-white/5">
          <dt class="text-sm/6 font-medium text-gray-500 dark:text-gray-400">Ø Alter</dt>
          <dd class="w-full flex-none text-3xl/10 font-medium tracking-tight text-gray-900 dark:text-white">{{ avgAge|default('-') }}</dd>
        </div>
      </dl>
    </div>

    <div aria-hidden="true" class="absolute top-full left-0 -z-10 mt-96 origin-top-left translate-y-40 -rotate-90 transform-gpu opacity-20 blur-3xl sm:left-1/2 sm:-mt-10 sm:-ml-96 sm:translate-y-0 sm:rotate-0 sm:opacity-50 dark:opacity-10 dark:sm:opacity-30">
      <div style="clip-path: polygon(100% 38.5%, 82.6% 100%, 60.2% 37.7%, 52.4% 32.1%, 47.5% 41.8%, 45.2% 65.6%, 27.5% 23.4%, 0.1% 35.3%, 17.9% 0%, 27.7% 23.4%, 76.2% 2.5%, 74.2% 56%, 100% 38.5%)" class="aspect-1154/678 w-288.5 bg-linear-to-br from-[#FF80B5] to-[#9089FC]"></div>
    </div>
  </div>

  <div class="xl:grid xl:grid-cols-3">
    <div class="xl:col-span-2 xl:border-r xl:border-gray-200 dark:xl:border-white/5 xl:pr-8">
      <div class="space-y-16 py-16 xl:space-y-20">
        {# Mobile Aside #}
        <aside class="xl:hidden">
          <h2 class="sr-only">Details</h2>
          <div class="space-y-5">
            <div class="flex items-center space-x-2">
              <span class="text-sm font-medium text-gray-500 dark:text-gray-400">Erstellt am</span>
              <span class="text-sm font-medium text-gray-900 dark:text-white"><time datetime="{{ edition.createdAt|date('c') }}">{{ edition.createdAt|date('d.m.Y H:i') }}</time></span>
            </div>
            {% if edition.archived %}
              <div class="flex items-center space-x-2">
                <span class="text-sm font-medium text-gray-500 dark:text-gray-400">Status</span>
                <span class="inline-flex items-center rounded-md bg-red-50 px-2 py-1 text-xs font-medium text-red-700 ring-1 ring-inset ring-red-600/10 dark:bg-red-500/10 dark:text-red-400 dark:ring-red-500/10">Archiviert</span>
              </div>
            {% endif %}
          </div>
        </aside>

        {# Offers Slider #}
        <div class="relative group/slider">
          <div class="flex items-center justify-between">
            <div class="flex items-baseline gap-4">
              <h2 class="text-base/7 font-semibold text-gray-900 dark:text-white">Angebote</h2>
              <a href="{{ path('admin_offers_index', { edition: edition.alias }) }}" class="text-sm font-semibold text-primary-600 hover:text-primary-500 dark:text-primary-400 dark:hover:text-primary-300">
                Alle ansehen <span aria-hidden="true">&rarr;</span>
              </a>
            </div>
            <div class="hidden sm:flex items-center space-x-2">
              <button type="button" onclick="this.closest('.group\\/slider').querySelector('.slider-content').scrollBy({left: -320, behavior: 'smooth'})" class="rounded-full bg-white dark:bg-gray-800 p-1.5 text-gray-400 shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-white/10 hover:text-gray-500 dark:hover:text-gray-300 focus:outline-none">
                <twig:ux:icon name="ph:caret-left" class="size-5" />
              </button>
              <button type="button" onclick="this.closest('.group\\/slider').querySelector('.slider-content').scrollBy({left: 320, behavior: 'smooth'})" class="rounded-full bg-white dark:bg-gray-800 p-1.5 text-gray-400 shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-white/10 hover:text-gray-500 dark:hover:text-gray-300 focus:outline-none">
                <twig:ux:icon name="ph:caret-right" class="size-5" />
              </button>
            </div>
          </div>
          <div class="slider-content mt-6 flex overflow-x-auto space-x-8 pb-10 no-scrollbar snap-x snap-mandatory scroll-smooth">
            {% for offer in offers %}
              <div class="flex-none w-80 overflow-hidden rounded-lg outline outline-gray-200 dark:-outline-offset-1 dark:outline-white/10 bg-white dark:bg-gray-900 snap-start">
                {% if offer.media|first %}
                  <a href="{{ path('admin_offers_show', { uuid: offer.uuid.toBase58 }) }}" class="block aspect-video overflow-hidden">
                    {{ contao_figure(offer.media|first | to_image, picture_config({
                        width: 320,
                        height: 180,
                        resizeMode: 'crop',
                    }), {options: { attr: {class: 'w-full h-full object-cover', loading: 'lazy'}}}) }}
                  </a>
                {% endif %}
                <div class="flex items-center gap-x-4 border-b border-gray-900/5 bg-gray-50 p-4 dark:border-white/10 dark:bg-gray-800/50">
                  <div class="text-sm/6 font-medium text-gray-900 dark:text-white truncate" title="{{ offer.name }}">
                    <a href="{{ path('admin_offers_show', { uuid: offer.uuid.toBase58 }) }}" class="hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-gray-100 rounded-md px-1 py-0.5 -mx-1 -my-0.5 transition-colors">{{ offer.name }}</a>
                  </div>
                </div>
                <dl class="-my-3 divide-y divide-gray-100 px-4 py-4 text-sm/6 dark:divide-white/10">
                  <div class="flex justify-between gap-x-4 py-3">
                    <dt class="text-gray-500 dark:text-gray-400">Veranstalter</dt>
                    <dd class="text-gray-700 dark:text-gray-300 truncate max-w-[150px]" title="{{ offer.hosts|map(h => h.name)|join(', ') }}">
                      {{ offer.hosts|first.name|default('-') }}
                    </dd>
                  </div>
                  <div class="flex justify-between gap-x-4 py-3">
                    <dt class="text-gray-500 dark:text-gray-400">Anmeldungen</dt>
                    <dd class="text-gray-700 dark:text-gray-300">{{ offer.attendances|length }}</dd>
                  </div>
                </dl>
              </div>
            {% endfor %}
          </div>
        </div>

        {# Activity Log #}
        <section aria-labelledby="activity-title">
          <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">
              {% if is_granted('ROLE_ADMIN') %}
                <twig:Admin:EditionActivity item="{{ edition }}" />
              {% endif %}
            </div>
          </div>
        </section>
      </div>
    </div>

    {# Desktop Aside #}
    <aside class="hidden xl:block xl:pl-8 py-16">
      <h2 class="sr-only">Details</h2>
      <div class="space-y-5">
        <div class="flex items-center space-x-2">
          <span class="text-sm font-medium text-gray-500 dark:text-gray-400">Erstellt am</span>
          <span class="text-sm font-medium text-gray-900 dark:text-white"><time datetime="{{ edition.createdAt|date('c') }}">{{ edition.createdAt|date('d.m.Y H:i') }}</time></span>
        </div>
        {% if edition.archived %}
          <div class="flex items-center space-x-2">
            <span class="text-sm font-medium text-gray-500 dark:text-gray-400">Status</span>
            <span class="inline-flex items-center rounded-md bg-red-50 px-2 py-1 text-xs font-medium text-red-700 ring-1 ring-inset ring-red-600/10 dark:bg-red-500/10 dark:text-red-400 dark:ring-red-500/10">Archiviert</span>
          </div>
        {% endif %}
      </div>

      <div class="mt-6 space-y-8 border-t border-gray-200 dark:border-white/10 py-6">
        {% if edition.tasks is not empty %}
          <div>
            <h2 class="text-sm font-medium text-gray-500 dark:text-gray-400">Phasen</h2>
            <ul role="list" class="mt-2 space-y-3">
              {% for task in edition.tasks %}
                <li class="text-sm">
                  <div class="font-medium text-gray-900 dark:text-white">{{ ("editions.task." ~ task.type)|trans }}</div>
                  <div class="text-gray-500 dark:text-gray-400">
                    {{ task.periodBegin ? task.periodBegin|date('d.m.') : '?' }} - {{ task.periodEnd ? task.periodEnd|date('d.m.Y') : '?' }}
                  </div>
                </li>
              {% endfor %}
            </ul>
          </div>
        {% endif %}

        {% if edition.hosts is not empty %}
          <div>
            <h2 class="text-sm font-medium text-gray-500 dark:text-gray-400">Limitierte Veranstaltende</h2>
            <ul role="list" class="mt-2 flex flex-wrap gap-1">
              {% for host in edition.hosts %}
                <li>
                  <span class="relative inline-flex items-center rounded-full px-2.5 py-1 ring-1 ring-gray-300 ring-inset dark:ring-white/10">
                    <span class="text-xs font-semibold text-gray-900 dark:text-white">{{ host.name }}</span>
                  </span>
                </li>
              {% endfor %}
            </ul>
          </div>
        {% endif %}

        {# Actions #}
        {% set actionsMenu = list_actions(edition) %}
        {% set actions = actionsMenu.children|filter(a => a.displayed and a.name in ['delete']) %}
        {% if actions|length %}
          <div class="pt-6 border-t border-gray-200 dark:border-white/10">
            <h2 class="text-sm font-medium text-gray-500 dark:text-gray-400">Aktionen</h2>
            <div class="mt-2 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>
          </div>
        {% endif %}
      </div>
    </aside>
  </div>
{% endblock %}
