{% trans_default_domain 'admin' %}

<div {{ attributes }} class="bg-gray-50 dark:bg-gray-800/50 px-4 py-6 sm:px-6 @md:bg-transparent @md:dark:bg-transparent @md:px-0 @md:py-0 w-full">
    {# Title row: title + entity info inline, actions on the right (where the nav used to be) #}
    <div class="flex flex-col @lg:flex-row @lg:items-center justify-between gap-x-6 gap-y-3">
        <div class="flex flex-wrap items-baseline gap-x-3.5 gap-y-1.5 min-w-0">
            <h1 class="text-xl font-bold tracking-tight text-gray-900 dark:text-gray-50 @md:dark:text-gray-50 truncate">{{ offer.name ? offer.name : 'offers.new'|trans({}, 'admin') }}</h1>

            {% if detailed and offer.id %}
                <div class="hidden @lg:block self-center h-4 w-px bg-gray-300 dark:bg-gray-700"></div>

                <div class="flex flex-wrap items-center gap-x-3.5 gap-y-1 text-sm text-gray-500 dark:text-gray-400">
                    <span class="inline-flex items-center gap-x-1.5">
                    <twig:ux:icon name="ph:calendar-blank" class="size-4 text-gray-400 shrink-0" aria-hidden="true" />
                    <span class="whitespace-nowrap">
                        {% if offer.dates is not empty %}
                            {% set startDate = offer.dates|first.begin %}
                            {% if startDate %}
                                <time datetime="{{ startDate|date('c') }}">{{ startDate|format_datetime(pattern="E, dd.MM.yyyy HH:mm") }}</time>
                            {% else %}
                                <span class="inline-flex items-center text-orange-600">
                                    {{ ux_icon('ph:warning', {class: 'mr-1 size-3.5'}) }}
                                    <span>{{ 'offers.dates.missing'|trans({}, 'admin') }}</span>
                                </span>
                            {% endif %}
                        {% else %}
                            <span>{{ 'offers.dates.continuous'|trans({}, 'admin') }}</span>
                        {% endif %}
                    </span>

                    <twig:Admin:Dropdown dropdownClass="w-72" position="left">
                        <twig:block name="toggle">
                            <button class="inline-flex items-center hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-gray-100 rounded-md px-1.5 py-0.5 -mx-1.5 -my-0.5 transition-colors"
                                    title="{{ 'offers.variants_title'|trans({}, 'admin') }}">
                                <span class="whitespace-nowrap">{{ offer.variantNumber ?: 1 }} / {{ variants|length }}</span>
                            </button>
                        </twig:block>
                        <twig:block name="dropdown">
                            {% for variant in variants %}
                                <twig:Admin:DropdownItem href="{{ path(app.current_route, app.current_route_parameters|merge({ uuid: variant.uuid })) }}" :active="variant.uuid == offer.uuid">
                                    {{ include("@FerienpassAdmin/page/offers/_status_icon.html.twig", { offer: variant, size: 'size-4' }) }}
                                    <span class="{{ variant.cancelled ? 'line-through text-gray-400 ml-1.5' : 'ml-1.5' }}">
                                        {% if variant.dates is not empty %}
                                            {% set startDate = variant.dates|first.begin %}
                                            {% if startDate %}
                                                <time datetime="{{ startDate|date('c') }}">{{ startDate|format_datetime(pattern="E, dd.MM.yyyy HH:mm") }}</time>
                                            {% else %}
                                                <span class="inline-flex items-center text-orange-600">
                                                    {{ ux_icon('ph:warning', {class: 'mr-1 size-3.5'}) }}
                                                    <span>{{ 'offers.dates.missing'|trans({}, 'admin') }}</span>
                                                </span>
                                            {% endif %}
                                        {% else %}
                                            <span>{{ 'offers.dates.continuous'|trans({}, 'admin') }}</span>
                                        {% endif %}
                                    </span>

                                    <twig:Admin:Badge color="{{ variant.isVariantBase ? 'yellow' : 'gray' }}" class="ml-1" content="{{ variant.variantNumber }}" />

                                    {% if variant.requiresApplication and variant.onlineApplication %}
                                        <span class="ml-auto flex items-center space-x-1 font-normal" title="{{ 'offers.current_attendances'|trans({}, 'admin') }}">
                                            <span class="{{ (variant.maxParticipants and variant.attendancesConfirmed|length >= variant.maxParticipants) ? 'text-red-700' : 'text-green-700' }}">
                                                <svg viewBox="0 0 2 2" class="h-2 w-2 fill-current">
                                                    <circle cx="1" cy="1" r="1"/>
                                                </svg>
                                            </span>
                                            <span>
                                                {{ variant.attendancesWithStatuses(["confirmed", "waiting", "waitlisted"])|length ~ ' / ' ~ (variant.maxParticipants|default('∞')) ~ '' }}
                                            </span>
                                            {% if not variant.cancelled and (variant.attendancesWaiting|length or (variant.maxParticipants and variant.attendancesConfirmed|length < variant.maxParticipants and variant.attendancesWaitlisted|length)) %}
                                                <span title="{{ 'offers.unassigned_attendances'|trans({}, 'admin') }}" class="mt-0.5 text-orange-600 size-3.5">{{ ux_icon('ph:warning') }}</span>
                                            {% endif %}
                                        </span>
                                    {% endif %}
                                </twig:Admin:DropdownItem>
                            {% endfor %}
                            {% if offer.edition and is_granted('offer.create', offer.edition) %}
                                <div class="border-t border-gray-100 dark:border-white/5 mt-1 pt-1">
                                    <twig:Admin:DropdownItem href="{{ path('admin_offers_new_variant', { uuid: (offer.variantBase.uuid ?? offer.uuid).toBase58 }) }}">
                                        <span class="mr-2 size-4 flex-shrink-0 text-primary-600 dark:text-primary-400">{{ ux_icon('ph:plus') }}</span>
                                        <span class="text-primary-600 dark:text-primary-400 font-medium text-left leading-tight">{{ 'offers.new_variant'|trans({}, 'admin') }}</span>
                                    </twig:Admin:DropdownItem>
                                </div>
                            {% endif %}
                        </twig:block>
                    </twig:Admin:Dropdown>
                    </span>

                    <span class="inline-flex items-center gap-x-1.5" title="{{ 'offers.places_title'|trans({}, 'admin') }}">
                        <twig:ux:icon name="ph:users-three" class="size-4 text-gray-400 shrink-0" aria-hidden="true" />
                        <span class="whitespace-nowrap">{{ offer.attendancesWithStatuses(["confirmed", "waiting"])|length }} / {{ offer.maxParticipants ?: '∞' }} {{ 'offers.places_label'|trans({}, 'admin') }}</span>
                        {% if not offer.cancelled and (offer.attendancesWaiting|length or (offer.maxParticipants and offer.attendancesConfirmed|length < offer.maxParticipants and offer.attendancesWaitlisted|length)) %}
                            <span title="nicht-zugeteilte Teilnehmende" class="text-orange-600 w-4 h-4 shrink-0">{{ ux_icon('ph:warning') }}</span>
                        {% endif %}
                    </span>
                    {% if app.current_route in ['admin_offer_assign', 'admin_offer_assign_legacy'] %}
                        <span class="inline-flex items-center gap-x-1.5" title="Min. Teilnehmer">
                            <span class="size-4 text-gray-400 shrink-0">{{ ux_icon('ph:greater-than-or-equal') }}</span>
                            <span class="whitespace-nowrap">{{ offer.minParticipants ?: 0 }}</span>
                        </span>
                        <span class="inline-flex items-center gap-x-1.5" title="Max. Teilnehmer">
                            <span class="size-4 text-gray-400 shrink-0">{{ ux_icon('ph:less-than-or-equal') }}</span>
                            <span class="whitespace-nowrap">{{ offer.maxParticipants ?: '∞' }}</span>
                        </span>
                    {% endif %}
                    {% if demand is not null %}
                        <span class="inline-flex items-center gap-x-1.5 {{ demand > 100 ? 'text-red-600 font-semibold' : '' }}" title="{{ 'offers.demand_title'|trans({}, 'admin') }}">
                            <twig:ux:icon name="ph:person-simple-run" class="size-4 text-gray-400 shrink-0" aria-hidden="true" />
                            {{ demand }} %
                        </span>
                    {% endif %}
                    <a href="{{ path("admin_offers_show", { uuid: offer.uuid.toBase58, kommentare: 1 }) }}"
                       class="inline-flex items-center gap-x-1.5 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"
                       data-turbo-frame="slideover"
                       title="{{ 'offers.comments_title'|trans({}, 'admin') }}">
                        <twig:ux:icon name="ph:chat-dots" class="size-4 text-gray-400 shrink-0" aria-hidden="true" />
                        <span class="text-xs leading-6">{{ offer.comments|length }}</span>
                    </a>
                </div>
            {% endif %}
        </div>

        <div class="flex items-center justify-between @lg:justify-end w-full @lg:w-auto gap-4 shrink-0">
            <twig:Admin:Dropdown dropdownClass="w-52">
                <twig:block name="toggle">
                    <button class="cursor-pointer flex items-center rounded-full text-gray-400 hover:text-gray-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600">
                        <span class="sr-only">{{ 'offers.links.copy_aria'|trans({}, 'admin') }}</span>
                        <twig:ux:icon name="ph:link" class="size-5" />
                    </button>
                </twig:block>
                <twig:block name="dropdown">
                    <div class="py-1">
                        {% if offer.publish == 'public' %}
                            {% if offer.edition %}
                                <button type="button" class="group flex items-center w-full px-4 py-2 text-left text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 focus:bg-gray-100 dark:focus:bg-gray-700 focus:text-gray-900 dark:focus:text-white focus:outline-hidden"
                                        x-data=""
                                        @click="navigator.clipboard.writeText('{{ offer_public_link(offer) }}')">
                                    <twig:ux:icon name="ph:globe" class="mr-3 h-5 w-5 flex-shrink-0 text-gray-400 group-hover:text-gray-500 dark:group-hover:text-gray-300" />
                                    <span class="truncate">{{ 'offers.links.copy_offer'|trans({}, 'admin') }}</span>
                                </button>
                            {% endif %}
                            {% if offer.variantBase or offer.hasVariants() %}
                                {% set variantBase = offer.variantBase ?: offer %}
                                <button type="button" class="group flex items-center w-full px-4 py-2 text-left text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 focus:bg-gray-100 dark:focus:bg-gray-700 focus:text-gray-900 dark:focus:text-white focus:outline-hidden"
                                        x-data=""
                                        @click="navigator.clipboard.writeText('{{ url('cms', { to: 'offer_list', edition: offer.edition ? offer.edition.id : null, varianten: variantBase.id }) }}')">
                                    <twig:ux:icon name="ph:globe" class="mr-3 h-5 w-5 flex-shrink-0 text-gray-400 group-hover:text-gray-500 dark:group-hover:text-gray-300" />
                                    <span class="truncate">{{ 'offers.links.copy_group'|trans({}, 'admin') }}</span>
                                </button>
                            {% endif %}
                        {% endif %}
                        <button type="button" class="group flex items-center w-full px-4 py-2 text-left text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 focus:bg-gray-100 dark:focus:bg-gray-700 focus:text-gray-900 dark:focus:text-white focus:outline-hidden"
                                x-data=""
                                @click="navigator.clipboard.writeText('{{ offer_private_link(offer) }}')">
                            <twig:ux:icon name="ph:lock" class="mr-3 h-5 w-5 flex-shrink-0 text-gray-400 group-hover:text-gray-500 dark:group-hover:text-gray-300" />
                            <span class="truncate">{{ 'offers.links.copy_private'|trans({}, 'admin') }}</span>
                        </button>
                    </div>
                </twig:block>
            </twig:Admin:Dropdown>

            <twig:Admin:OfferStatusSelect :offer="offer" :key="offer.uuid" />
        </div>
    </div>

    {# Tertiary nav: offer-level tab strip below the title. Shown everywhere
       EXCEPT inside the slideover panel — detected by DOM ancestry (the panel's
       <dialog id="admin-slideover-dialog"> is an ancestor only when the content
       was extracted into the panel). Not Turbo-Frame-driven, so one cached body
       fits both the direct full-page visit and the panel. Fails open: if the
       arbitrary-variant utility isn't built, the nav just shows. #}
    <div class="[#admin-slideover-dialog_&]:hidden">
        {% include '@FerienpassAdmin/components/_tertiary_nav.html.twig' with { menu: menu } only %}
    </div>
</div>
