<div class="card-brutal overflow-hidden">
    <div class="section-header">
        <h2 class="text-[10px] font-black uppercase tracking-widest text-white">Recapitulatif</h2>
    </div>
    <div class="p-4 sm:p-6">
        <p class="font-black uppercase text-xs sm:text-sm tracking-widest mb-3 sm:mb-4">{{ order.event.title }}</p>

        {% for item in order.items %}
        <div class="flex justify-between gap-2 py-2 {{ not loop.last ? 'border-b border-gray-200' : '' }}">
            <div class="min-w-0">
                <p class="font-bold text-sm truncate">{{ item.billetName }}</p>
                <p class="text-xs text-gray-400 font-bold">x{{ item.quantity }} — {{ item.unitPriceHTDecimal|number_format(2, ',', ' ') }} &euro;/u</p>
            </div>
            <p class="font-black text-sm text-indigo-600 flex-shrink-0">{{ item.lineTotalHTDecimal|number_format(2, ',', ' ') }} &euro;</p>
        </div>
        {% endfor %}

        <div class="flex justify-between pt-3 sm:pt-4 mt-3 sm:mt-4 border-t-2 border-gray-900">
            <span class="font-black uppercase text-sm">Total HT</span>
            <span class="font-black text-lg text-indigo-600">{{ order.totalHTDecimal|number_format(2, ',', ' ') }} &euro;</span>
        </div>

        {% if order.orderNumber %}
            <p class="text-[10px] font-bold text-gray-400 mt-2">Commande {{ order.orderNumber }}</p>
        {% endif %}
    </div>
</div>
