{% 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:Host:Header host="{{ 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">
            erstellt am <time datetime="{{ item.createdAt|date('c') }}">{{ item.createdAt|date('d.m.Y H:i') }}</time>
          </p>
          <p class="mt-1 text-sm text-gray-500">
            <span>{{ item.offers|length }} Angebote gesamt</span>
          </p>
        </div>
      </div>

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

      <div class="space-y-8">
            {% if not commentsOnly %}
              <div class="py-3 @5xl:pt-6 @5xl:pb-0">
                <h2 class="sr-only">Beschreibung</h2>
                <div class="text-sm @lg:text-base/7 text-gray-700 dark:text-gray-300">
                  {% if item.text %}
                    {{ item.text|markdown_to_html }}
                  {% else %}
                    <p>-</p>
                  {% endif %}
                </div>
              </div>
              <div class="pt-5">
                <h2 class="text-lg font-medium text-gray-900 dark:text-white">Verknüpfte Konten</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 user in item.users %}
                    <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">{{ user.firstname|first|upper ~ user.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: user.uuid.toBase58}) }}" data-turbo-frame="_top">
                              <span class="absolute inset-x-0 -top-px bottom-0"></span>
                              {{ user.name }}
                            </a>
                          </p>
                          <p class="mt-1 flex text-xs/5 text-gray-500 dark:text-gray-400">
                            {{ user.email }}
                          </p>
                        </div>
                      </div>
                      <div class="flex shrink-0 items-center gap-x-4">
                        <twig:ux:icon name="ph:caret-right" class="size-5 flex-none text-gray-400" aria-hidden="true" />
                      </div>
                    </li>
                  {% endfor %}
                </ul>
              </div>
            {% endif %}
          </div>
      {% if is_granted('ROLE_ADMIN') %}
        <section aria-labelledby="activity-title" class="mt-8 @5xl:mt-10">
          <twig:Admin:HostActivity item="{{ item }}" :commentsOnly="commentsOnly"/>
        </section>
      {% endif %}
    </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">Erstellt am</dt>
      <dd class="mt-1 text-sm text-gray-900 dark:text-gray-100">
        <time datetime="{{ item.createdAt|date('c') }}">{{ item.createdAt|date('d.m.Y H:i') }}</time>
      </dd>
    </div>
    <div>
      <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Postanschrift</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>
    <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.fax %}<div>{{ item.fax }}</div>{% endif %}
        {% if item.mobile %}<div>{{ item.mobile }}</div>{% endif %}
        {% if item.email %}<div>{{ item.email }}</div>{% endif %}
        {% if item.website %}<div>{{ item.website }}</div>{% endif %}
      </dd>
    </div>

    {# 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 %}
