{% trans_default_domain 'admin' %}
<li id="{{ "item-#{item.id}" }}"
    class="relative px-6 py-5 {{ item.id == offer.id|default ? ((item.published or item.reviewed ? 'bg-green-100/60 dark:bg-green-900/40' : (item.draft ? 'bg-orange-100/75 dark:bg-orange-900/40' : 'bg-gray-100/75 dark:bg-gray-800/75'))) : ((item.published or item.reviewed ? 'bg-green-50 hover:bg-green-100/50 dark:bg-green-900/20 dark:hover:bg-green-900/30' : (item.draft ? 'bg-orange-50 hover:bg-orange-100/50 dark:bg-orange-900/20 dark:hover:bg-orange-900/30' : 'bg-white hover:bg-gray-50 dark:bg-gray-900 dark:hover:bg-gray-800'))) }} focus-within:ring-2 focus-within:ring-inset focus-within:ring-blue-600">
    <div>
        <div class="flex items-center justify-between space-x-3">
            <div class="min-w-0 flex-1">
                <a class="block focus:outline-none"
                   data-action="live#emit:prevent"
                   data-live-event-param="open"
                   data-live-offer-param="{{ item.id }}">
                    <span class="absolute inset-0" aria-hidden="true"></span>
                    <p class="truncate text-sm font-medium text-gray-900 dark:text-gray-100 flex items-center gap-1 {{ item.cancelled ? 'line-through' : '' }}">
                        {{ include("@FerienpassAdmin/page/offers/_status_icon.html.twig", { offer: item }) }}
                        {{ item.name }}
                    </p>

                </a>
            </div>
            <p class="text-xs font-medium text-gray-500 dark:text-gray-400">
                {{ '#'~item.id }}
            </p>
        </div>
        <p class="truncate text-sm text-gray-500 dark:text-gray-400">
            {% if item.dates is not empty %}
                {% set startDate = item.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-4'}) }}
                        <span>Termin fehlt</span>
                    </span>
                {% endif %}
            {% else %}
                <span>Dauerangebot</span>
            {% endif %}
        </p>
    </div>
    <div class="mt-1 flex items-center gap-x-2 text-xs leading-5 text-gray-500 dark:text-gray-100/40">

        <p>
            <span class="flex items-center gap-x-1" title="Kommentare / Aktivität">
                <twig:ux:icon name="ph:chat-dots" class="h-5 w-5 text-gray-400 dark:text-gray-500" aria-hidden="true" />
                <span class="text-xs leading-6">{{ item.comments|length }}</span>
            </span>

        </p>

        <svg viewBox="0 0 2 2" class="h-0.5 w-0.5 fill-current">
            <circle cx="1" cy="1" r="1"/>
        </svg>

        <p>{{ item.variants(true)|length }} Termine(e)</p>

    </div>
</li>
