{# "Guessed" Word-document preview: a stylized editable-document page populated
   with real offer data, mirroring the fields the .docx template fills. #}
{% if offers is empty %}
    {{ include('@FerienpassAdmin/components/export/_preview_empty.html.twig') }}
{% else %}
    <div class="w-full max-w-[340px] rounded-sm bg-white px-7 py-6 shadow-md dark:bg-gray-50">
        <div class="mb-4 flex gap-1">
            <i class="h-1 w-7 rounded bg-indigo-500"></i>
            <i class="h-1 w-4 rounded bg-gray-200"></i>
            <i class="h-1 w-5 rounded bg-gray-200"></i>
        </div>
        <h4 class="text-[17px] font-extrabold tracking-tight text-gray-900">Angebotsübersicht</h4>
        <p class="mt-1 text-[10.5px] text-gray-500">Bearbeitbares Dokument · {{ 'now'|format_datetime('long', 'none', locale='de') }}</p>
        <div class="my-4 h-px bg-gray-200"></div>

        {% for offer in offers %}
            {% set d = offer.dates|first %}
            {% if offer.minAge and offer.maxAge %}{% set age = offer.minAge ~ '–' ~ offer.maxAge ~ ' Jahre' %}
            {% elseif offer.minAge %}{% set age = 'ab ' ~ offer.minAge ~ ' Jahren' %}
            {% elseif offer.maxAge %}{% set age = 'bis ' ~ offer.maxAge ~ ' Jahre' %}
            {% else %}{% set age = 'alle Kinder' %}{% endif %}
            <div class="border-b border-gray-100 py-2.5 last:border-0">
                <b class="block text-[12px] font-bold text-gray-900">{{ offer.name }}</b>
                {% if offer.description %}
                    <p class="mt-1 line-clamp-2 text-[10px] leading-snug text-gray-500">{{ offer.description|striptags }}</p>
                {% endif %}
                <div class="mt-1.5 space-y-0.5 text-[10px] text-gray-600">
                    {% if d and d.begin %}<div><span class="text-gray-400">Termin:</span> {{ d.begin|format_datetime('medium', 'short', locale='de', timezone='Europe/Berlin') }}</div>{% endif %}
                    <div><span class="text-gray-400">Geeignet für:</span> {{ age }}</div>
                    <div><span class="text-gray-400">Kostenbeitrag:</span> {{ offer.fee ? (offer.fee / 100)|format_currency('EUR', locale='de') : 'kostenlos' }}</div>
                    {% if offer.hosts is not empty %}<div><span class="text-gray-400">Veranstalter:</span> {{ offer.hosts|map(h => h.name)|join(', ') }}</div>{% endif %}
                </div>
            </div>
        {% endfor %}
    </div>
{% endif %}
