{{--
    Les quatre cases du code (v2.0.1 §3).

    Quatre champs plutôt qu'un seul : chaque case fait la taille d'un doigt, on voit d'un coup
    d'œil combien de chiffres restent, et une erreur se corrige d'un seul retour arrière. Le
    passage d'une case à l'autre est automatique — mais chaque case reste un vrai champ, donc
    l'écran fonctionne même si le script n'est pas chargé.

    Le message ne dit JAMAIS si la personne existe : « Si ce numéro est connu, un code vient
    d'être envoyé. » Le libellé s'adapte à ce qui a été TAPÉ, jamais à ce qui a été trouvé.
--}}
@php
    $envoye = ($type ?? 'telephone') === 'email'
        ? __('formation.porte_envoye_email')
        : __('formation.porte_envoye_telephone');
@endphp

<x-formation.page-publique :titre="__('formation.entrer_titre')">

    <div class="rounded-2xl border-2 border-primaire/30 bg-primaire/10 p-4">
        <div class="flex items-start gap-3">
            <p class="min-w-0 flex-1 text-base font-bold leading-relaxed">{{ $envoye }}</p>
            <x-formation.ecouter :texte="$envoye" class="shrink-0" />
        </div>
    </div>

    @if (session('formation_message'))
        <p class="mt-4 rounded-2xl border-2 border-coaching/40 bg-coaching/10 p-3 text-center text-base font-bold">
            {{ session('formation_message') }}
        </p>
    @endif

    <form method="POST" action="{{ route('formation.porte.verifier') }}" class="mt-6" data-code-groupe>
        @csrf

        <p class="mb-3 text-center text-lg text-encre-doux">{{ __('formation.entrer_explication') }}</p>

        <div class="flex justify-center gap-3" dir="ltr">
            @for ($i = 0; $i < (int) config('formation.acces.code_longueur', 4); $i++)
                <input type="text" name="code[]"
                       inputmode="numeric" pattern="[0-9]*" maxlength="1"
                       autocomplete="{{ $i === 0 ? 'one-time-code' : 'off' }}"
                       @if ($i === 0) autofocus @endif
                       aria-label="{{ __('formation.entrer_titre') }} — {{ $i + 1 }}"
                       class="h-20 w-16 rounded-2xl border-2 border-bordure bg-surface-haute text-center text-4xl font-extrabold text-encre focus:border-primaire focus:outline-none">
            @endfor
        </div>

        @error('code')
            <p class="mt-4 rounded-2xl border-2 border-terrain/50 bg-terrain/10 p-3 text-center text-base font-bold">
                {{ $message }}
            </p>
        @enderror

        <button type="submit" class="bouton-principal mt-6">{{ __('formation.entrer_bouton') }}</button>
    </form>

    {{-- Renvoyer : possible au bout d'une minute, et le compte à rebours le dit. --}}
    <form method="POST" action="{{ route('formation.porte.renvoyer') }}" class="mt-4">
        @csrf
        <button type="submit" class="bouton-secondaire w-full"
                data-renvoi-bouton
                data-renvoi-secondes="{{ $secondesAvantRenvoi }}"
                data-renvoi-libelle="{{ __('formation.code_renvoyer') }}"
                data-renvoi-attente="{{ __('formation.code_renvoyer_attente', ['secondes' => ':s']) }}"
                @disabled($secondesAvantRenvoi > 0)>
            {{ $secondesAvantRenvoi > 0
                ? __('formation.code_renvoyer_attente', ['secondes' => $secondesAvantRenvoi])
                : __('formation.code_renvoyer') }}
        </button>
    </form>

    <form method="POST" action="{{ route('formation.porte.changer') }}" class="mt-3">
        @csrf
        <button type="submit" class="cible-tactile w-full text-sm text-encre-doux underline decoration-dotted underline-offset-4">
            {{ __('formation.porte_changer') }}
        </button>
    </form>

    <p class="mt-6 text-center text-sm leading-relaxed text-encre-doux">
        {{ __('formation.porte_aide') }}
    </p>
</x-formation.page-publique>