{{-- La liste des brouillons : reprise en un clic, suppression possible. --}}
<ul class="divide-y divide-gray-200 dark:divide-white/10">
    @forelse ($brouillons as $brouillon)
        <li class="flex items-center justify-between gap-4 py-3">
            <div class="min-w-0">
                <p class="truncate text-sm font-medium text-gray-900 dark:text-gray-100">
                    {{ $brouillon->objet ?: 'Sans objet' }}
                </p>
                <p class="text-xs text-gray-500 dark:text-gray-400">
                    {{ $brouillon->client?->raison_sociale ? $brouillon->client->raison_sociale.' · ' : '' }}
                    {{ $brouillon->destinataires ? implode(', ', array_slice($brouillon->destinataires, 0, 2)) : 'sans destinataire' }}
                    · modifié le {{ $brouillon->updated_at?->format('d/m/Y à H:i') }}
                </p>
            </div>
            <div class="flex shrink-0 items-center gap-2">
                <button
                    type="button"
                    wire:click="ouvrirBrouillon({{ $brouillon->id }})"
                    class="rounded-lg bg-primary-600 px-3 py-1.5 text-sm font-medium text-white transition hover:bg-primary-500"
                >
                    Reprendre
                </button>
                <button
                    type="button"
                    wire:click="supprimerBrouillon({{ $brouillon->id }})"
                    wire:confirm="Supprimer ce brouillon ?"
                    class="rounded-lg border border-gray-300 px-3 py-1.5 text-sm font-medium text-gray-700 transition hover:bg-gray-50 dark:border-white/20 dark:text-gray-200 dark:hover:bg-white/5"
                >
                    Supprimer
                </button>
            </div>
        </li>
    @empty
        <li class="py-3 text-sm text-gray-500">Aucun brouillon.</li>
    @endforelse
</ul>