@extends('layouts.app')
@section('title','Activer la double authentification')
@section('heading','Double authentification (2FA)')
@section('subheading','Sécurisez votre compte avec une application d\'authentification.')
@section('content')
<div class="max-w-2xl">
    <x-card>
        <ol class="space-y-6">
            <li class="flex gap-4">
                <span class="shrink-0 h-8 w-8 rounded-full bg-brand-600 text-white grid place-items-center text-sm font-bold">1</span>
                <div class="text-sm text-slate-600">
                    Installez une application d'authentification sur votre téléphone :
                    <b>Google Authenticator</b>, <b>Microsoft Authenticator</b> ou <b>Authy</b>.
                </div>
            </li>
            <li class="flex gap-4">
                <span class="shrink-0 h-8 w-8 rounded-full bg-brand-600 text-white grid place-items-center text-sm font-bold">2</span>
                <div>
                    <p class="text-sm text-slate-600 mb-3">Scannez ce QR code avec l'application :</p>
                    <div class="inline-block p-3 bg-white rounded-2xl border border-slate-200">{!! $qrSvg !!}</div>
                    <p class="text-xs text-slate-400 mt-3">Impossible de scanner ? Saisissez cette clé manuellement :</p>
                    <code class="inline-block mt-1 px-3 py-1.5 bg-slate-100 rounded-lg text-sm font-mono tracking-wider select-all">{{ $secret }}</code>
                </div>
            </li>
            <li class="flex gap-4">
                <span class="shrink-0 h-8 w-8 rounded-full bg-brand-600 text-white grid place-items-center text-sm font-bold">3</span>
                <form method="POST" action="{{ route('2fa.enable') }}" class="flex-1">
                    @csrf
                    <p class="text-sm text-slate-600 mb-2">Entrez le code à 6 chiffres affiché dans l'application :</p>
                    <div class="flex flex-wrap gap-2">
                        <input name="code" inputmode="numeric" autocomplete="one-time-code" placeholder="123456" required autofocus
                               class="w-40 rounded-xl border border-slate-200 px-4 py-3 text-lg tracking-[0.4em] font-mono text-center focus:ring-2 focus:ring-brand-500/60 focus:border-brand-400 outline-none">
                        <x-btn type="submit">Activer la 2FA</x-btn>
                        <x-btn variant="secondary" :href="route('users.edit', auth()->id())">Annuler</x-btn>
                    </div>
                </form>
            </li>
        </ol>
    </x-card>
</div>
@endsection