{{--
    Le chemin (v2.0 §3).

    « Progression figurée par un chemin dont les étapes s'allument, pas par un pourcentage. »
    Chaque module est une PHOTO : l'image porte le sens pour qui ne lit pas. Une pastille dit
    l'état — franchie, en cours, verrouillée — sans qu'aucun chiffre soit nécessaire.
--}}
<x-formation.coquille :entete="$apprenant->programme?->titre ?? \App\Support\Identite::marque()" :sans-retour="true">

    {{-- Bandeau des heures : un chiffre, gros, et rien d'autre. Le détail est un tap plus loin. --}}
    <a href="{{ route('formation.moi') }}" wire:navigate
       class="carte flex items-center gap-4 border-primaire/30 bg-primaire/10">
        <span dir="ltr" class="grid h-14 w-14 shrink-0 place-items-center rounded-2xl bg-primaire text-xl font-extrabold text-white dark:text-navy">
            {{ (int) $heures }}
        </span>
        <span class="min-w-0 flex-1">
            <span class="block text-base font-bold">{{ __('formation.heures_accomplies') }}</span>
            <span class="block text-sm text-encre-doux">{{ __('formation.sur_objectif', ['objectif' => $objectif]) }}</span>
            <span class="mt-2 block h-2.5 w-full overflow-hidden rounded-full bg-bordure">
                <span class="block h-full rounded-full bg-primaire" style="inline-size: {{ $pourcentage }}%"></span>
            </span>
        </span>
        <svg class="h-6 w-6 shrink-0 text-encre-doux rtl:-scale-x-100" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true">
            <path d="M9 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
    </a>

    <h2 class="mb-3 mt-8 flex items-center gap-3 text-xl font-extrabold">
        {{ __('formation.mon_parcours') }}
        <x-formation.ecouter :texte="__('formation.mon_parcours')" />
    </h2>

    @forelse ($etapes as $index => $etape)
        @php
            $module = $etape['module'];
            $etat = $etape['etat'];
            $ouvert = $etape['ouvert'];
        @endphp

        <div class="relative flex gap-3 pb-3">
            {{-- Le fil du chemin : il relie les étapes, et il s'allume derrière soi. --}}
            <div class="flex flex-col items-center">
                <span @class([
                    'grid h-11 w-11 shrink-0 place-items-center rounded-full text-base font-extrabold',
                    'bg-coaching text-white' => $etat === 'termine',
                    'bg-primaire text-white dark:text-navy' => $etat === 'en_cours',
                    'border-2 border-bordure bg-surface text-encre-doux' => in_array($etat, ['a_venir', 'verrouille'], true),
                ])>
                    @if ($etat === 'termine')
                        <svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" aria-hidden="true">
                            <path d="M5 13l4 4L19 7" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    @elseif ($etat === 'verrouille')
                        <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
                            <rect x="5" y="11" width="14" height="10" rx="2"/>
                            <path d="M8 11V8a4 4 0 118 0v3"/>
                        </svg>
                    @else
                        {{ $index + 1 }}
                    @endif
                </span>
                @unless ($loop->last)
                    <span @class([
                        'w-1 flex-1 rounded-full',
                        'bg-coaching' => $etat === 'termine',
                        'bg-bordure' => $etat !== 'termine',
                    ])></span>
                @endunless
            </div>

            @if ($ouvert)
                <a href="{{ route('formation.module', $module) }}" wire:navigate class="carte flex flex-1 items-center gap-3">
                    @include('livewire.formation.partials.vignette-module', ['module' => $module, 'etat' => $etat, 'etape' => $etape])
                </a>
            @else
                <div class="carte flex flex-1 items-center gap-3 opacity-55">
                    @include('livewire.formation.partials.vignette-module', ['module' => $module, 'etat' => $etat, 'etape' => $etape])
                </div>
            @endif
        </div>
    @empty
        <div class="carte text-center">
            <p class="text-base text-encre-doux">{{ __('formation.aucun_module') }}</p>
        </div>
    @endforelse

    {{-- Le bouton unique : à chaque instant, un grand « continuer » et rien d'autre. --}}
    <x-slot:action>
        @if ($prochaine)
            <a href="{{ $prochaine['url'] }}" wire:navigate class="bouton-principal">
                {{ $pourcentage > 0 ? __('formation.reprendre') : __('formation.commencer') }}
                <svg class="h-6 w-6 rtl:-scale-x-100" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" aria-hidden="true">
                    <path d="M9 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            </a>
        @else
            <a href="{{ route('formation.moi') }}" wire:navigate class="bouton-principal">
                {{ __('formation.ma_progression') }}
            </a>
        @endif
    </x-slot:action>
</x-formation.coquille>