{% if offers is empty %}
    {{ include('@FerienpassAdmin/components/export/_preview_empty.html.twig') }}
{% else %}
    <div class="w-full max-w-[320px] space-y-2.5">
        {% for offer in offers %}
            {% set d = offer.dates|first %}
            <div class="flex gap-3 rounded-lg border border-gray-200 bg-white p-3 shadow-sm dark:border-gray-800 dark:bg-gray-900">
                <div class="w-12 flex-none rounded-lg bg-blue-50 py-1.5 text-center dark:bg-blue-500/10">
                    {% if d and d.begin %}
                        <div class="text-[9px] font-extrabold uppercase tracking-wide text-blue-600 dark:text-blue-400">{{ d.begin|format_datetime('none', 'none', pattern='MMM', locale='de', timezone='Europe/Berlin') }}</div>
                        <div class="text-lg font-extrabold leading-tight text-gray-900 dark:text-gray-100">{{ d.begin|date('d') }}</div>
                    {% else %}
                        <div class="text-lg font-extrabold leading-tight text-gray-300">—</div>
                    {% endif %}
                </div>
                <div class="min-w-0 flex-1">
                    <b class="block truncate text-[12.5px] font-bold text-gray-900 dark:text-gray-100">{{ offer.name }}</b>
                    {% if d and d.begin and d.end %}
                        <div class="mt-1 flex items-center gap-1.5 text-[10.5px] text-gray-500 dark:text-gray-400">
                            <twig:ux:icon name="ph:clock" class="size-3 flex-none text-blue-600 dark:text-blue-400" />{{ d.begin|date('H:i') }}–{{ d.end|date('H:i') }}
                        </div>
                    {% endif %}
                    {% if offer.hosts is not empty %}
                        <div class="mt-0.5 flex items-center gap-1.5 text-[10.5px] text-gray-500 dark:text-gray-400">
                            <twig:ux:icon name="ph:map-pin" class="size-3 flex-none text-blue-600 dark:text-blue-400" /><span class="truncate">{{ offer.hosts|map(h => h.name)|join(', ') }}</span>
                        </div>
                    {% endif %}
                </div>
            </div>
        {% endfor %}
    </div>
{% endif %}
