@extends('layouts.app')
@section('title', 'Two-Factor Authentication')
@section('content')
<section class="content-header"><h1>VRC Two-Factor Authentication</h1></section>
<section class="content">
    @if(session('vrc_2fa_error'))<div class="alert alert-danger">{{ session('vrc_2fa_error') }}</div>@endif
    @if(session('vrc_2fa_ok'))<div class="alert alert-success">{{ session('vrc_2fa_ok') }}</div>@endif

    @if(session('vrc_2fa_recovery'))
        <div class="alert alert-warning">
            <strong>Save your recovery codes</strong> — each can be used once if you lose your authenticator:
            <code>{{ implode('  ', session('vrc_2fa_recovery')) }}</code>
        </div>
    @endif

    <div class="row"><div class="col-md-6">
    @if($enabled)
        @component('components.widget', ['class' => 'box-success', 'title' => '2FA is enabled'])
            <p>Your VRC sessions are protected with a time-based one-time code.</p>
            <form method="POST" action="{{ route('vrc.security.2fa.disable') }}">
                @csrf
                <div class="form-group"><label>Enter a current code to disable</label>
                    <input name="code" class="form-control" autocomplete="off" required></div>
                <button class="btn btn-danger">Disable 2FA</button>
            </form>
        @endcomponent
    @else
        @component('components.widget', ['class' => 'box-primary', 'title' => 'Enable 2FA'])
            <ol>
                <li>Add this account to an authenticator app (Google Authenticator, Authy, …).</li>
                <li>Scan the setup URI or enter the key manually, then confirm with the 6-digit code.</li>
            </ol>
            <p><strong>Manual key:</strong> <code>{{ $pendingSecret }}</code></p>
            <p style="word-break:break-all;"><strong>Setup URI:</strong><br><code>{{ $uri }}</code></p>
            <form method="POST" action="{{ route('vrc.security.2fa.enable') }}">
                @csrf
                <div class="form-group"><label>6-digit code from your app</label>
                    <input name="code" class="form-control" autocomplete="off" required></div>
                <button class="btn btn-primary">Verify &amp; enable</button>
            </form>
        @endcomponent
    @endif
    </div></div>
</section>
@endsection
