{{-- * Modal d'édition de carte avec double couche --}}
<div
    x-show="showCardModal"
    x-cloak
    class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
    @click.self="showCardModal = false"
>
    <div class="bg-white rounded-2xl shadow-xl max-w-4xl w-full mx-4 max-h-[90vh] overflow-y-auto">
        {{-- Header --}}
        <div class="sticky top-0 bg-white border-b border-gray-200 px-6 py-4 flex items-center justify-between">
            <h3 class="text-xl font-semibold text-boulanger-dark">
                <span x-text="editingCard ? 'Éditer la carte' : 'Nouvelle carte'"></span>
            </h3>
            <button
                @click="showCardModal = false"
                class="text-gray-400 hover:text-gray-600 transition-colors"
            >
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                </svg>
            </button>
        </div>

        {{-- Body --}}
        <div class="p-6 space-y-6">
            {{-- Titre --}}
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">
                    Titre de la carte <span class="text-red-500">*</span>
                </label>
                <input
                    type="text"
                    x-model="cardForm.title"
                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-boulanger-orange focus:border-transparent"
                    placeholder="Ex: Process Canal+"
                >
            </div>

            {{-- Section Globale (admin only ou read-only) --}}
            <div class="border border-blue-200 rounded-lg p-4 bg-blue-50/30">
                <div class="flex items-center justify-between mb-3">
                    <div class="flex items-center gap-2">
                        <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                        <h4 class="font-semibold text-blue-900">Contenu Global (National)</h4>
                    </div>
                    <span class="text-xs px-2 py-1 bg-blue-100 text-blue-700 rounded-full" x-show="!isAdmin">
                        🔒 Lecture seule
                    </span>
                </div>
                <p class="text-xs text-blue-700 mb-3">
                    Informations définies au niveau national, identiques pour tous les magasins.
                </p>
                <textarea
                    x-model="cardForm.global_body"
                    :disabled="!isAdmin"
                    :class="!isAdmin ? 'bg-gray-100 cursor-not-allowed' : 'bg-white'"
                    class="w-full px-4 py-3 border border-blue-200 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent font-mono text-sm"
                    rows="6"
                    placeholder="Contenu global (description générale, lien partenaire, processus standard...)"
                ></textarea>
                <p class="text-xs text-gray-500 mt-2">
                    💡 Supporte le Markdown pour la mise en forme
                </p>
            </div>

            {{-- Section Magasin (tous) --}}
            <div class="border border-green-200 rounded-lg p-4 bg-green-50/30">
                <div class="flex items-center gap-2 mb-3">
                    <svg class="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
                    </svg>
                    <h4 class="font-semibold text-green-900">Personnalisation Magasin</h4>
                </div>
                <p class="text-xs text-green-700 mb-3">
                    Informations spécifiques à votre magasin (identifiants, contact local, notes...).
                </p>
                <textarea
                    x-model="cardForm.store_body"
                    class="w-full px-4 py-3 border border-green-200 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent bg-white font-mono text-sm"
                    rows="6"
                    placeholder="Ajoutez ici les informations propres à votre magasin..."
                ></textarea>
                <p class="text-xs text-gray-500 mt-2">
                    ✏️ Cette section est éditable par les managers et animateurs
                </p>
            </div>

            {{-- Alert erreur --}}
            <div x-show="error" x-cloak class="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg flex items-center gap-2">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <span x-text="error"></span>
            </div>
        </div>

        {{-- Footer --}}
        <div class="sticky bottom-0 bg-gray-50 border-t border-gray-200 px-6 py-4 flex items-center justify-end gap-3">
            <button
                @click="showCardModal = false"
                class="px-4 py-2 text-gray-700 hover:bg-gray-200 rounded-lg transition-colors"
            >
                Annuler
            </button>
            <button
                @click="saveCard()"
                :disabled="saving"
                class="px-6 py-2 bg-boulanger-orange text-white rounded-lg hover:bg-orange-600 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
            >
                <svg x-show="saving" class="animate-spin h-5 w-5" fill="none" viewBox="0 0 24 24">
                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                </svg>
                <span x-text="saving ? 'Enregistrement...' : 'Enregistrer'"></span>
            </button>
        </div>
    </div>
</div>