@extends('layouts.app', ['title' => 'Configurar 2FA'])

@section('content')
<div class="card" style="max-width:520px;margin:30px auto">
    <div class="card-head"><div><div class="card-title"><i class="fa-solid fa-shield-halved text-gold"></i> Autenticacion en dos pasos</div><div class="sub">Escanea el QR con Google Authenticator, Authy o 1Password</div></div></div>

    <div style="text-align:center;margin:18px 0">
        <img src="{{ $qr }}" alt="QR 2FA" style="border-radius:12px;background:#fff;padding:10px">
    </div>

    <div class="sub" style="margin-bottom:10px">O introduce esta clave manualmente:</div>
    <div class="text-mono" style="text-align:center;background:#ffffff;padding:10px;border-radius:10px;letter-spacing:.18em;font-weight:600">{{ chunk_split($secret, 4, ' ') }}</div>

    <div class="sub" style="margin-top:14px;color:var(--gold)"><i class="fa-solid fa-key"></i> Codigos de recuperacion (guardalos en lugar seguro):</div>
    <div class="text-mono" style="background:#ffffff;padding:12px;border-radius:10px;margin-top:6px;column-count:2;font-size:13px">
        @foreach($codes as $c)<div>{{ $c }}</div>@endforeach
    </div>

    <form method="post" action="{{ route('2fa.confirm') }}" style="margin-top:20px">
        @csrf
        <label>Codigo de 6 digitos para confirmar
            <input name="code" pattern="\d{6}" maxlength="6" inputmode="numeric" required autofocus>
        </label>
        <button class="btn btn-primary" type="submit" style="margin-top:14px;width:100%"><i class="fa-solid fa-check"></i>Activar 2FA</button>
    </form>
</div>
@endsection