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

            {# Veranstalter take part in the conversation too — it is how they reach
               the team about their own offer, and how the team reaches them. They
               see the messages addressed to their Veranstalter and their own, never
               the team's internal notes (ConversationVisibility), and never the
               status/transition trail, which is administrative bookkeeping. #}
            {% set isTeam = is_granted('ROLE_ADMIN') %}
            {% if isTeam or is_granted('view', item) %}
                <section aria-labelledby="activity-title" class="border-t border-gray-200 dark:border-gray-800">
                    <twig:Admin:OfferActivity item="{{ item }}" :commentsOnly="isTeam ? commentsOnly : true"/>
                </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 %}
