{{--
    Les pièces déjà mises de côté.

    Les zones de dépôt sont vidées sitôt les fichiers rangés sur le disque —
    c'est la correction de la v1.3.5 : un fichier temporaire consommé qui reste
    dans l'état du formulaire est relu deux fois après coup, à la validation et
    au rendu, et chacune de ces relectures échoue. Les pièces se lisent donc
    ici, et c'est ici qu'on en retire une.
--}}
@php $pieces = $this->piecesEnAttente(); @endphp

@if ($pieces !== [])
    <div class="rounded-xl border border-gray-200 bg-gray-50 p-4 dark:border-white/10 dark:bg-white/5">
        <p class="text-sm font-semibold text-gray-900 dark:text-gray-100">
            {{ count($pieces) }} pièce{{ count($pieces) > 1 ? 's' : '' }} en attente de rattachement
        </p>
        <p class="mt-0.5 text-xs text-gray-500 dark:text-gray-400">
            Elles sont déjà sur le serveur et seront rattachées au dossier à la création.
        </p>

        <ul class="mt-3 divide-y divide-gray-200 dark:divide-white/10">
            @foreach ($pieces as $piece)
                <li class="flex items-center justify-between gap-3 py-2">
                    <div class="min-w-0">
                        <p class="truncate text-sm font-medium text-gray-900 dark:text-gray-100" title="{{ $piece['libelle'] }}">
                            {{ $piece['libelle'] }}
                        </p>
                        <p class="text-xs text-gray-500 dark:text-gray-400">
                            {{ $piece['type'] }} — {{ $piece['taille'] }}
                        </p>
                    </div>

                    <button
                        type="button"
                        wire:click="retirerPiece(@js($piece['empreinte']))"
                        wire:loading.attr="disabled"
                        class="shrink-0 text-xs font-medium text-danger-600 underline underline-offset-4 transition hover:text-danger-700 dark:text-danger-400"
                    >
                        Retirer
                    </button>
                </li>
            @endforeach
        </ul>
    </div>
@endif