{{--
    Ce que la notion vient d'écrire (v2.1 §2 et §3).

    C'est le moment qui fait tenir tout le reste. Le bénéficiaire n'a pas « rempli un document » —
    il a répondu à trois questions sur son projet, et on lui montre que ces trois réponses SONT
    déjà dans son Business Plan. Sans ce retour, les trente questions suivantes ressemblent à un
    formulaire administratif, et il abandonne à la douzième.
--}}
@php
    $champs = $questionsProjet->pluck('champ')->all();
    $parChamp = $dossier->parChamp();
    $renseignes = collect($champs)->filter(fn (string $c): bool => $parChamp->get($c)?->estRenseignee() === true);
@endphp

<div class="rounded-2xl border-2 border-coaching/50 bg-coaching/10 p-4 text-center">
    <p class="text-xl font-extrabold">{{ __('formation.tu_viens_decrire') }}</p>
    <p class="mt-1 text-base leading-relaxed">
        {{ trans_choice('formation.reponses_rangees', $renseignes->count(), ['nombre' => $renseignes->count()]) }}
    </p>
</div>

@if ($renseignes->isNotEmpty())
    <div class="carte mt-4 divide-y divide-bordure">
        @foreach ($renseignes as $champ)
            <div class="flex items-start gap-3 py-3 first:pt-0 last:pb-0">
                <div class="min-w-0 flex-1">
                    <p class="text-sm text-encre-doux">{{ App\Support\Formation\CatalogueChamps::libelleDocument($champ) }}</p>
                    <p class="text-base font-bold leading-relaxed">{{ $parChamp->get($champ)->valeurAffichee() }}</p>
                </div>
            </div>
        @endforeach
    </div>
@endif

{{-- L'avancement du dossier entier, pour situer ces trois réponses dans le chemin. --}}
<div class="carte mt-4">
    <div class="flex items-baseline justify-between">
        <p class="text-base font-bold">{{ __('formation.ton_dossier') }}</p>
        <p class="text-base font-black tabular-nums">{{ $dossier->avancement() }} %</p>
    </div>
    <div class="mt-2 h-2.5 w-full overflow-hidden rounded-full bg-bordure">
        <div class="h-full rounded-full bg-coaching transition-[inline-size]"
             style="inline-size: {{ $dossier->avancement() }}%"></div>
    </div>
</div>

<x-slot:action>
    <div class="flex gap-2">
        <a href="{{ route('formation.dossier') }}" wire:navigate class="bouton-secondaire shrink-0">
            {{ __('formation.voir_mon_dossier') }}
        </a>
        <a href="{{ route('formation.module', $notion->module) }}" wire:navigate class="bouton-principal">
            {{ __('formation.continuer') }}
        </a>
    </div>
</x-slot:action>