{{-- v4.7.0 §B4, redessiné en v4.11.0 §B — « CE QUE NOUS ATTENDONS DE VOUS », EN TÊTE DE PAGE.

     Assemblé UNE fois par VueClient::attendus() — la même liste pour la page de lecture, l'espace
     connecté et l'aperçu. Connecté : chaque ligne mène à l'action. En lecture : « Se connecter
     pour valider », qui MÈNE À LA CONNEXION quand un compte existe — jamais un bouton mort, jamais
     une mention grise qu'on ne peut pas suivre.

     v4.11.0 — Le bloc n'est plus une carte parmi d'autres : c'est LA première chose de la page,
     avec son filet d'accent à gauche et l'action de chaque ligne juste en face. Le filet prend la
     couleur de l'ESPACE (`--espace-primaire`), jamais une couleur écrite en dur. --}}
@props(['attendus', 'publique' => false, 'lienDuModule' => null, 'lienConnexion' => null, 'libelleConnexion' => 'Se connecter pour valider'])

@php
    $elements = $attendus['elements'] ?? [];
    $total = $attendus['total'] ?? 0;
@endphp

@if ($total > 0)
    <section class="relative mb-5 overflow-hidden rounded-xl border border-amber-200 bg-amber-50 shadow-sm dark:border-amber-500/30 dark:bg-amber-500/10"
             data-attendus aria-labelledby="attendus-titre">
        {{-- Le filet d'accent : la couleur de l'espace, sur toute la hauteur du bloc. --}}
        <span class="ec-accent-bg absolute inset-y-3 left-0 w-1 rounded-r" aria-hidden="true"></span>

        <div class="px-4 py-3 pl-5">
            <h2 id="attendus-titre" class="flex items-center gap-2 text-sm font-bold text-amber-900 dark:text-amber-200">
                Ce que nous attendons de vous
                <span class="rounded-full bg-white/80 px-2 py-0.5 text-xs font-bold tabular-nums text-amber-800 dark:bg-white/10 dark:text-amber-200">{{ $total }}</span>
            </h2>
            <p class="mt-0.5 text-xs text-amber-800/80 dark:text-amber-300/80">
                @if ($publique)
                    Page de lecture — connectez-vous à votre espace pour valider.
                @else
                    Chaque réponse part horodatée aux deux parties : c'est la trace.
                @endif
            </p>
        </div>

        <ul class="space-y-2 px-4 pb-4 pl-5">
            @foreach ($elements as $element)
                <li class="flex flex-wrap items-center gap-x-3 gap-y-2 rounded-lg border border-gray-200 bg-white px-3 py-2.5 dark:border-white/10 dark:bg-gray-900">
                    <div class="min-w-0 flex-1">
                        <p class="text-sm font-semibold text-gray-900 dark:text-white">{{ $element['titre'] }}</p>
                        <p class="mt-0.5 text-xs text-gray-500 dark:text-gray-400">{{ $element['detail'] }}</p>
                    </div>

                    @if ($publique)
                        @if ($lienConnexion)
                            <a href="{{ $lienConnexion }}"
                               class="ec-accent-bg ec-sur-accent inline-flex h-9 flex-none items-center rounded-lg px-3 text-xs font-bold">
                                {{ $libelleConnexion }}
                            </a>
                        @else
                            <span class="flex-none text-xs font-medium text-amber-800 dark:text-amber-300">se connecter pour valider</span>
                        @endif
                    @elseif ($element['peut_agir'])
                        <a href="{{ $lienDuModule ? $lienDuModule($element['module']) : '#' }}"
                           class="ec-accent-bg ec-sur-accent inline-flex h-9 flex-none items-center rounded-lg px-3 text-xs font-bold">
                            {{ $element['type'] === 'piece' ? 'Joindre' : ($element['type'] === 'creneau' ? 'Répondre' : 'Valider') }}
                        </a>
                    @else
                        <span class="flex-none text-xs font-medium text-gray-500 dark:text-gray-400">en lecture — votre valideur est attendu</span>
                    @endif
                </li>
            @endforeach
        </ul>
    </section>
@endif