{% trans_default_domain 'admin' %}

<div {{ attributes.defaults({
    'class': 'px-4 py-5 sm:px-6 lg:px-8 bg-white dark:bg-gray-900',
}) }}>
    <div class="sm:flex sm:items-baseline sm:justify-between">
        <div class="sm:w-0 sm:flex-1">
            <div class="flex items-center space-x-2">
                {% if showWorkflowButton %}
                    {{ include("@FerienpassAdmin/page/offers/_status_icon.html.twig", { offer: offer }) }}
                {% endif %}
                <h1 id="message-heading" class="text-base font-semibold text-gray-900 dark:text-white {{ offer.cancelled ? 'line-through' : '' }}">
                    <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.5 py-1 -mx-1.5 -my-1 transition-colors"
                       data-turbo-frame="slideover">
                        {{ offer.name }}
                    </a>
                    {% if (offer.isVariant|default or offer.hasVariants) and offer.variantNumber is defined %}
                        {{ component("Admin:Badge", { color: offer.isVariantBase ? "yellow" : "gray", class: "ml-1", content: offer.variantNumber|default("") }) }}
                    {% endif %}
                </h1>
            </div>

            <div class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                <p class="truncate">
                    {% 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>Termin fehlt</span>
                            </span>
                        {% endif %}
                    {% else %}
                        <span>Dauerangebot</span>
                    {% endif %}
                </p>
            </div>

            {% if showThirdLine %}
                <div class="mt-1 flex items-center gap-x-3 text-sm text-gray-500 dark:text-gray-400">
                    <span class="flex items-center gap-x-1" title="Min. Teilnehmer">
                        <span class="h-4 w-4">{{ ux_icon('ph:greater-than-or-equal') }}</span>
                        {{ offer.minParticipants ?: 0 }} Teilnehmende
                    </span>
                    <span class="flex items-center gap-x-1" title="Max. Teilnehmer">
                        <span class="h-4 w-4">{{ ux_icon('ph:less-than-or-equal') }}</span>
                        {{ offer.maxParticipants ?: '∞' }} Teilnehmende
                    </span>
                    {% set demand = this.demand %}
                    {% if demand is not null %}
                        <span class="flex items-center gap-x-1 {{ demand > 100 ? 'text-red-600 font-semibold' : '' }}" title="Nachfrage">
                            <span class="h-4 w-4">{{ ux_icon('ph:person-simple-run') }}</span>
                            {{ demand }} %
                        </span>
                    {% endif %}
                    <a href="{{ path("admin_offers_show", { uuid: offer.uuid.toBase58, kommentare: 1 }) }}"
                       class="flex items-center gap-x-1 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="Kommentare / Aktivität">
                        <span class="h-5 w-5 text-gray-400" aria-hidden="true">{{ ux_icon('ph:chat-dots') }}</span>
                        <span class="text-xs leading-6">{{ offer.comments|length }}</span>
                    </a>
                </div>
            {% endif %}
        </div>

        <div class="mt-4 flex items-center justify-between sm:mt-0 sm:ml-6 sm:shrink-0 sm:justify-start">
            <div class="flex items-center space-x-3">
                {% if showStatusSelect %}
                    {% component 'Admin:OfferStatusSelect' with { offer: offer, key: offer.uuid } %}{% endcomponent %}
                {% endif %}

                {% if menu is not null %}
                    <div class="-my-2 inline-block text-left">
                        {% component 'Admin:Dropdown' %}
                            {% block toggle %}
                                <button class="flex items-center rounded-full text-gray-400 hover:text-gray-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 dark:text-gray-400 dark:hover:text-gray-300">
                                    <span class="sr-only">Open options</span>
                                    <span class="size-5" aria-hidden="true">{{ ux_icon('ph:dots-three-vertical-bold') }}</span>
                                </button>
                            {% endblock %}
                            {% block dropdown %}
                                <div class="px-4 py-3">
                                    <p class="text-xs font-semibold text-gray-700 dark:text-gray-400">
                                        {{ offer.name }}
                                        {% if (offer.isVariant|default or offer.hasVariants) and offer.variantNumber is defined %}
                                            {{ component("Admin:Badge", { color: offer.isVariantBase ? "yellow" : "gray", class: "ml-1", content: offer.variantNumber|default("") }) }}
                                        {% endif %}
                                    </p>
                                    {% if offer.hosts %}
                                        <p class="text-xs text-gray-700 dark:text-gray-400 mb-2 truncate">{{ offer.hosts|map(h => h.name)|join(', ') }}</p>
                                    {% endif %}
                                </div>

                                {% set sections = menu.children|filter(i => i.isDisplayed)|map(i => i.extra('section', 'default'))|reduce((unique, section) => section in unique ? unique : unique|merge([section]), []) %}
                                {% for section in sections %}
                                    <div class="border-t border-gray-100 dark:border-white/10 py-1">
                                        {% for item in menu.children|filter(i => i.isDisplayed and i.extra('section', 'default') == section) %}
                                            {% set itemAttrs = item.extra('attr', {})|merge(item.linkAttributes|default([])) %}
                                            {% component 'Admin:DropdownItem' with { 
                                                href: item.uri, 
                                                attributes: itemAttrs,
                                                method: item.extra('method', 'get'),
                                            } %}
                                                {% block content %}
                                                    {% trans_default_domain 'admin' %}
                                                    {% if item.extra('icon') %}
                                                        <span class="mr-1.5 size-4 flex-shrink-0 {{ item.extra('color') }}">
                                                            {{ ux_icon('ph:' ~ item.extra('icon')) }}
                                                        </span>
                                                    {% endif %}
                                                    <span class="text-left leading-tight">{{ item.label|trans(item.extra('translation_params', {}), item.extra('translation_domain', 'admin')) }}</span>
                                                {% endblock %}
                                            {% endcomponent %}
                                        {% endfor %}
                                    </div>
                                {% endfor %}
                            {% endblock %}
                        {% endcomponent %}
                    </div>
                {% endif %}

                {% block actions %}{% endblock %}
            </div>
        </div>
    </div>
</div>
