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

{% block main %}

    <div class="mb-4 @lg:mb-8">
      <twig:Admin:Offer:Header offer="{{ item }}" detailed="{{ true }}"/>
    </div>

    <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">

            <div class="flex flex-col @md:flex-row @md:items-center @md:justify-between @md:space-x-4 border-b pb-6 border-gray-200 dark:border-gray-800">
                <div>
                    <p class="text-sm text-gray-500">
                        {% set creator = item.contactUser ?? (item.activity|first ? (item.activity|first).createdBy : null) %}
                        {% if creator %}
                            erstellt von <a href="{{ path('admin_accounts_show', { uuid: creator.uuid.toBase58 }) }}"
                                            class="font-medium text-gray-900 dark:text-gray-100"
                                            data-turbo-frame="_top">{{ creator.name }}</a>
                        {% else %}
                            erstellt am
                            <time datetime="{{ item.createdAt|date('c') }}">{{ item.createdAt|date('d.m.Y H:i') }}</time>
                        {% endif %}
                    </p>
                </div>
            </div>

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

            <div class="pb-6 @lg:py-6">
                <h2 class="sr-only">Beschreibung</h2>
                <div class="text-sm @lg:text-base/7 text-gray-700 dark:text-gray-300">
                    {% if item.description %}
                        {{ item.description|markdown_to_html }}
                    {% else %}
                        <p>-</p>
                    {% endif %}
                </div>
            </div>

            {% if is_granted('ROLE_ADMIN') %}
                <section aria-labelledby="activity-title" class="border-t border-gray-200 dark:border-gray-800">
                    <twig:Admin:OfferActivity item="{{ item }}" :commentsOnly="commentsOnly"/>
                </section>
            {% endif %}
        </div>

        <aside class="hidden @lg:block @lg:pl-8 @lg:border-l @lg:border-gray-200 @lg: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>
        {% if item.categories is defined and item.categories is not empty %}
            <div class="hidden @lg:block">
                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Kategorien</dt>
                <dd class="mt-2">
                    <ul role="list" class="flex flex-wrap gap-1">
                        {% for category in item.categories %}
                            <li>
                <span class="relative inline-flex items-center rounded-full px-2.5 py-1 ring-1 ring-gray-300 ring-inset dark:ring-gray-700">
                  <span class="text-xs font-semibold text-gray-900 dark:text-gray-100">{{ category.name }}</span>
                </span>
                            </li>
                        {% endfor %}
                    </ul>
                </dd>
            </div>
        {% endif %}
        {% set actionsMenu = list_actions(item) %}
        {% set actions = actionsMenu.children|filter(a => a.displayed and a.name in ['variants','copy','increaseSeats','delete']) %}
        {% if actions|length %}
            <div class="hidden @lg:block">
                <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 %}
