{{--
    Une question de PROJET (v2.1 §2).

    Tout change ici, et il faut que ça se voie : la couleur passe au corail, l'en-tête ne dit plus
    « on vérifie » mais « maintenant, parle-moi de ton projet », et il n'y a plus ni bonne réponse,
    ni score, ni ✓, ni ✗. Rien à réussir.

    Un bénéficiaire qui croit passer un examen répond ce qu'il pense qu'on attend. Ce mensonge
    poli finit tel quel dans son Business Plan, et personne ne le rattrape avant la commission.
--}}
<div class="rounded-2xl border-2 border-corail/50 bg-corail/10 p-3 text-center">
    {{-- Cette phrase est aussi LUE À VOIX HAUTE au passage de la compréhension au projet :
         une partie du public ne lira pas ce bandeau. --}}
    <p class="text-base font-extrabold" data-annonce-projet>{{ __('formation.parle_moi_de_ton_projet') }}</p>
    <p class="mt-1 text-sm text-encre-doux">{{ __('formation.pas_de_bonne_reponse') }}</p>
</div>

<p class="mt-3 text-center text-sm text-encre-doux">
    {{ __('formation.question_sur_total', ['index' => $indexProjet + 1, 'total' => $totalProjet]) }}
</p>

<div class="carte mt-2 flex items-start gap-3">
    <div class="min-w-0 flex-1">
        <p class="text-lg font-bold leading-relaxed">{{ $question->enonce }}</p>
        @if (filled($question->exemple()))
            {{-- Un exemple, pas un modèle à recopier : il débloque sans souffler la réponse. --}}
            <p class="mt-2 text-base leading-relaxed text-encre-doux">
                {{ __('formation.par_exemple') }} {{ $question->exemple() }}
            </p>
        @endif
    </div>
    <x-formation.ecouter :texte="$question->enonce" />
</div>

{{-- La question redite autrement (§6). Elle S'AJOUTE à celle du formateur, elle ne la remplace
     pas : le bénéficiaire doit pouvoir revenir à la formulation que son formateur connaît. --}}
@if ($iaReformulation)
    @if ($reformulation)
        <div class="carte mt-2 flex items-start gap-3 border-dashed">
            <p class="min-w-0 flex-1 text-base leading-relaxed">{{ $reformulation }}</p>
            <x-formation.ecouter :texte="$reformulation" />
        </div>
    @else
        <button type="button" wire:click="reformulerLaQuestion" class="bouton-secondaire mt-2 w-full"
                wire:loading.attr="disabled" wire:target="reformulerLaQuestion">
            <span wire:loading.remove wire:target="reformulerLaQuestion">{{ __('formation.je_comprends_pas') }}</span>
            <span wire:loading wire:target="reformulerLaQuestion">{{ __('formation.un_instant') }}</span>
        </button>
    @endif
@endif

@if ($erreur)
    <p class="mt-3 rounded-2xl border-2 border-corail bg-corail/15 p-3 text-base font-bold">{{ $erreur }}</p>
@endif

@if ($reponse?->estRenseignee())
    <p class="mt-3 text-center text-sm text-encre-doux">
        {{ __('formation.deja_repondu') }} <b>{{ $reponse->valeurAffichee() }}</b>
    </p>
@endif

{{-- La manière de répondre est décidée par le TYPE du champ, jamais par l'écran (§5). --}}
@switch(true)
    @case($typeChamp === $typeNombre)
        @include('livewire.formation.partials.pave-numerique')
        @break

    @case($typeChamp === $typeMois)
        @include('livewire.formation.partials.choix-mois')
        @break

    @case($typeChamp === $typeChoix)
        @include('livewire.formation.partials.choix-liste')
        @break

    @case($typeChamp === $typeSaisonnalite)
        @include('livewire.formation.partials.saisonnalite')
        @break

    @case($typeChamp === $typeListe)
        @include('livewire.formation.partials.liste-etapes')
        @break

    @default
        @include('livewire.formation.partials.enregistreur-voix')
@endswitch

<x-slot:action>
    <div class="flex gap-2">
        {{-- Passer est toujours possible, et ne coûte rien : le manque sera nommé sur le
             document, pas reproché ici. --}}
        <button type="button" wire:click="passer" class="bouton-secondaire shrink-0">
            {{ __('formation.plus_tard') }}
        </button>

        @switch(true)
            @case($typeChamp === $typeNombre)
                <button type="button" wire:click="envoyerNombre" @disabled($saisieNombre === '') class="bouton-principal">
                    {{ __('formation.cest_ca') }}
                </button>
                @break

            @case($typeChamp === $typeMois)
                <button type="button" wire:click="envoyerNombre" @disabled($saisieNombre === '') class="bouton-principal">
                    {{ __('formation.cest_ca') }}
                </button>
                @break

            @case($typeChamp === $typeSaisonnalite)
                <button type="button" wire:click="envoyerSaisonnalite" class="bouton-principal">
                    {{ __('formation.cest_ca') }}
                </button>
                @break

            @case($typeChamp === $typeListe)
                <button type="button" wire:click="envoyerListe" @disabled($saisieListe === []) class="bouton-principal">
                    {{ __('formation.cest_ca') }}
                </button>
                @break

            @case($typeChamp === $typeChoix)
                {{-- Le choix vaut validation : un tap, et c'est enregistré. --}}
                @break

            @default
                <button type="button" wire:click="envoyerVoix" @disabled($audio === null) class="bouton-principal">
                    {{ __('formation.cest_ca') }}
                </button>
        @endswitch
    </div>
</x-slot:action>