<div class="space-y-10 animate-fade-in">
    {# --- SECTION 1 : EN-TÊTE --- #}
    <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 Adresses</h2>
            <p class="text-sm text-gray-500">Gérez vos lieux de livraison et d'installation Ludik Event.</p>
        </div>
        <div class="flex items-center gap-2 text-blue-600 bg-blue-50 px-4 py-2 rounded-2xl text-xs font-bold uppercase">
            <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="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
            </svg>
            {{ customer.customerAddresses|length }} Adresse(s) enregistrée(s)
        </div>
    </div>

    {# --- SECTION 2 : LISTING DES ADRESSES --- #}
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        {% for addresse in customer.customerAddresses %}
            <div class="group bg-white p-6 rounded-[2rem] border border-gray-100 hover:border-blue-300 hover:shadow-xl transition-all duration-300 relative overflow-hidden">
                {# Décoration subtile en arrière-plan #}
                <div class="absolute -right-4 -top-4 text-gray-50 group-hover:text-blue-50 transition-colors">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-24 w-24" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
                    </svg>
                </div>

                <div class="relative z-10">
                    <div class="flex justify-between items-start mb-4">
                        <div class="bg-blue-600 text-white p-2.5 rounded-xl shadow-lg shadow-blue-100">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
                            </svg>
                        </div>

                        {# Action : Supprimer #}
                        <form action="{{ path('gestion_contrat', {active: 'adresses'}) }}" method="POST" onsubmit="return confirm('Voulez-vous vraiment supprimer cette adresse ?');">
                            <input type="hidden" name="action" value="delete">
                            <input type="hidden" name="address_id" value="{{ addresse.id }}">
                            <button type="submit" class="p-2 text-gray-300 hover:text-red-500 hover:bg-red-50 rounded-xl transition-all" aria-label="Supprimer l'adresse">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                                </svg>
                            </button>
                        </form>
                    </div>

                    <div class="space-y-1">
                        <h3 class="text-lg font-extrabold text-gray-900 leading-tight">{{ addresse.address }}</h3>
                        {% if addresse.address2 %}<p class="text-sm text-gray-500">{{ addresse.address2 }}</p>{% endif %}
                        {% if addresse.address3 %}<p class="text-sm text-gray-400 italic">{{ addresse.address3 }}</p>{% endif %}
                        <div class="pt-3 flex items-center gap-2">
                            <span class="text-sm font-bold text-blue-600 bg-blue-50 px-2 py-1 rounded-lg">{{ addresse.zipcode }}</span>
                            <span class="text-sm font-bold text-gray-700 uppercase tracking-wide">{{ addresse.city }}</span>
                        </div>
                        <p class="text-xs text-gray-400 font-medium pt-1 uppercase tracking-tighter">{{ addresse.country }}</p>
                    </div>
                </div>
            </div>
        {% else %}
            <div class="md:col-span-2 flex flex-col items-center justify-center py-16 border-2 border-dashed border-gray-100 rounded-[3rem] bg-white/50">
                <div class="bg-gray-100 p-4 rounded-full mb-4">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                </div>
                <p class="text-gray-400 font-medium">Vous n'avez pas encore enregistré d'adresse.</p>
            </div>
        {% endfor %}
    </div>

    {# --- SECTION 3 : FORMULAIRE D'AJOUT (BLANC) --- #}
    <div class="bg-white rounded-[2.5rem] p-8 md:p-12 shadow-sm border border-gray-100 relative overflow-hidden">
        <div class="flex items-center gap-5 mb-10">
            <div class="bg-blue-600 text-white p-4 rounded-2xl shadow-lg shadow-blue-200">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                </svg>
            </div>
            <div>
                <h3 class="text-2xl font-black text-gray-900">Ajouter une adresse</h3>
                <p class="text-gray-500">Remplissez les champs pour enregistrer un nouveau lieu.</p>
            </div>
        </div>

        <form action="{{ path('gestion_contrat', {active: 'adresses'}) }}" method="POST" class="grid grid-cols-1 md:grid-cols-6 gap-6">
            <input type="hidden" name="action" value="add">

            <div class="md:col-span-6">
                <label class="block text-xs font-bold text-gray-400 uppercase mb-2 ml-2">Adresse principale</label>
                <input type="text" name="address" required placeholder="N° et nom de la rue..."
                       class="w-full bg-gray-50 border border-gray-100 rounded-2xl px-6 py-4 focus:ring-4 focus:ring-blue-50 focus:bg-white focus:border-blue-400 outline-none transition-all placeholder:text-gray-300 text-gray-700 font-medium">
            </div>

            <div class="md:col-span-3">
                <label class="block text-xs font-bold text-gray-400 uppercase mb-2 ml-2">Complément d'adresse</label>
                <input type="text" name="address2" placeholder="Bâtiment, étage, appartement..."
                       class="w-full bg-gray-50 border border-gray-100 rounded-2xl px-6 py-4 focus:ring-4 focus:ring-blue-50 focus:bg-white focus:border-blue-400 outline-none transition-all placeholder:text-gray-300 text-gray-700 font-medium">
            </div>

            <div class="md:col-span-3">
                <label class="block text-xs font-bold text-gray-400 uppercase mb-2 ml-2">Notes de livraison</label>
                <input type="text" name="address3" placeholder="Interphone, accès camion, portail..."
                       class="w-full bg-gray-50 border border-gray-100 rounded-2xl px-6 py-4 focus:ring-4 focus:ring-blue-50 focus:bg-white focus:border-blue-400 outline-none transition-all placeholder:text-gray-300 text-gray-700 font-medium">
            </div>

            <div class="md:col-span-2">
                <label class="block text-xs font-bold text-gray-400 uppercase mb-2 ml-2">Code Postal</label>
                <input type="text" name="zipcode" required placeholder="02100"
                       class="w-full bg-gray-50 border border-gray-100 rounded-2xl px-6 py-4 focus:ring-4 focus:ring-blue-50 focus:bg-white focus:border-blue-400 outline-none transition-all placeholder:text-gray-300 text-gray-700 font-medium">
            </div>

            <div class="md:col-span-2">
                <label class="block text-xs font-bold text-gray-400 uppercase mb-2 ml-2">Ville</label>
                <input type="text" name="city" required placeholder="Saint-Quentin"
                       class="w-full bg-gray-50 border border-gray-100 rounded-2xl px-6 py-4 focus:ring-4 focus:ring-blue-50 focus:bg-white focus:border-blue-400 outline-none transition-all placeholder:text-gray-300 text-gray-700 font-medium">
            </div>

            <div class="md:col-span-2">
                <label class="block text-xs font-bold text-gray-400 uppercase mb-2 ml-2">Pays</label>
                <div class="relative">
                    <select name="country" class="w-full bg-gray-50 border border-gray-100 rounded-2xl px-6 py-4 focus:ring-4 focus:ring-blue-50 focus:bg-white focus:border-blue-400 outline-none transition-all appearance-none text-gray-700 font-medium cursor-pointer">
                        <option value="France">France</option>
                    </select>
                    <div class="absolute inset-y-0 right-0 flex items-center pr-6 pointer-events-none text-gray-400">
                        <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path d="M19 9l-7 7-7-7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                    </div>
                </div>
            </div>

            <div class="md:col-span-6 flex flex-col sm:flex-row justify-end gap-4 mt-6">
                <button type="reset" class="order-2 sm:order-1 px-8 py-4 text-sm font-bold text-gray-400 hover:text-gray-600 transition-colors uppercase tracking-widest">
                    Effacer
                </button>
                <button type="submit" class="order-1 sm:order-2 bg-blue-600 hover:bg-blue-700 text-white font-black py-4 px-12 rounded-2xl transition-all shadow-xl shadow-blue-100 uppercase text-sm tracking-widest transform hover:scale-[1.02] active:scale-95">
                    Enregistrer l'adresse
                </button>
            </div>
        </form>
    </div>
</div>
