<div class="space-y-8 animate-fade-in">
    {# Header de section #}
    <div class="border-b border-gray-100 pb-6 flex flex-col md:flex-row md:items-center justify-between gap-4">
        <div>
            <h2 class="text-2xl font-bold text-gray-900">Mes Devis</h2>
            <p class="text-sm text-gray-500">Consultez vos propositions et signez vos documents en ligne.</p>
        </div>
        <div class="bg-yellow-50 text-yellow-700 px-4 py-2 rounded-2xl text-xs font-bold uppercase flex items-center gap-2">
            <span class="relative flex h-2 w-2">
                <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-yellow-400 opacity-75"></span>
                <span class="relative inline-flex rounded-full h-2 w-2 bg-yellow-500"></span>
            </span>
            {{ customer.devis|length }} Devis au total
        </div>
    </div>

    <div class="grid grid-cols-1 gap-4">
        {% for devis in customer.devis %}
            <div class="bg-white rounded-[2rem] border border-gray-100 p-6 shadow-sm hover:shadow-md transition-all flex flex-col md:flex-row items-center gap-6">

                {# Icône d'état #}
                <div class="flex-shrink-0">
                    <div class="w-16 h-16 rounded-2xl flex items-center justify-center
                        {{ devis.state == 'signed' ? 'bg-green-100 text-green-600' : 'bg-gray-100 text-gray-400' }}">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                        </svg>
                    </div>
                </div>

                {# Infos principales #}
                <div class="flex-grow text-center md:text-left">
                    <div class="flex flex-col md:flex-row md:items-center gap-2 mb-1">
                        <span class="text-lg font-black text-gray-900">Devis N°{{ devis.num }}</span>
                        {% if devis.state == 'created_waitsign' %}
                            <span class="bg-blue-100 text-blue-700 text-[10px] px-2 py-0.5 rounded-full font-bold uppercase">En attente de signature</span>
                        {% elseif devis.state == 'signed' %}
                            <span class="bg-green-100 text-green-700 text-[10px] px-2 py-0.5 rounded-full font-bold uppercase">Signé</span>
                        {% else %}
                            <span class="bg-gray-100 text-gray-600 text-[10px] px-2 py-0.5 rounded-full font-bold uppercase">Brouillon / Envoyé</span>
                        {% endif %}
                    </div>
                    <div class="text-sm font-medium text-gray-500 space-x-4">
                        <span>Total : <strong class="text-gray-900">{{ devis|totalQuoto }} €</strong></span>
                        <span class="hidden md:inline text-gray-300">|</span>
                        <span>Arrhes (25%) : <strong class="text-gray-900">{{ (devis|totalQuoto * 0.25)|number_format(2, ',', ' ') }} €</strong></span>
                    </div>
                </div>

                {# Actions dynamiques #}
                <div class="flex flex-wrap justify-center gap-3">
                    {% if devis.state == 'created_waitsign' %}
                        <a href="{{ devis|devisSignUrl }}" target="_blank" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-xl font-bold text-sm transition-all shadow-lg shadow-blue-100 flex items-center gap-2">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" /></svg>
                            Signer le devis
                        </a>
                    {% endif %}

                    {% if devis.state == 'signed' %}
                        <a download="Devis N°{{ devis.num }}" href="{{ vich_uploader_asset(devis, 'devisSignFile') }}" class="bg-green-600 hover:bg-green-700 text-white px-5 py-3 rounded-xl font-bold text-xs transition-all flex items-center gap-2">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10" /></svg>
                            Devis Signé
                        </a>
                        <a download="Certificat de signature N°{{ devis.num }}" href="{{ vich_uploader_asset(devis, 'devisAuditFile') }}" class="bg-gray-100 hover:bg-gray-200 text-gray-600 px-5 py-3 rounded-xl font-bold text-xs transition-all flex items-center gap-2">
                            Preuve Audit
                        </a>
                    {% else %}
                        <a href="{{ vich_uploader_asset(devis, 'devisFile') }}" class="bg-gray-50 hover:bg-gray-100 text-gray-500 px-5 py-3 rounded-xl font-bold text-xs transition-all border border-gray-200 flex items-center gap-2">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /></svg>
                            PDF Initial
                        </a>
                    {% endif %}
                </div>
            </div>
        {% else %}
            <div class="py-20 text-center bg-gray-50 rounded-[3rem] border-2 border-dashed border-gray-200">
                <p class="text-gray-400">Aucun devis disponible pour le moment.</p>
            </div>
        {% endfor %}
    </div>
</div>
