@extends(backpack_view('layouts.auth'))

@section('content')
<div class="page page-center">
    <div class="container container-tight py-4">
        <div class="text-center mb-4 display-6 auth-logo-container">
            {!! backpack_theme_config('project_logo') !!}
        </div>
        <div class="card">

            <div class="card-body text-start">

                <div class="mb-3">
                    <h2 class="h2 text-center my-4">Two-Factor Authentication</h2>
                </div>
                {{-- Show QR code --}}
                @if(isset($qr))
                    <p>Set up your two factor authentication by scanning the barcode below. </p>
                    {{-- <p>Alternatively you can use the code <strong>{{ $secret }}</strong></p> --}}

                    <div class="mb-3 text-center">
                        <img src="data:image/svg+xml;base64,{{ base64_encode($qr) }}" alt="QR Code">
                    </div>

                    <ol class="">
                        <li>Install the <strong>Google Authenticator</strong> app from the App Store (iOS) or Google Play Store (Android), if not already installed.</li>
                        <li>Open the app and tap the <strong>“+”</strong> icon.</li>
                        <li>Select <strong>“Scan a QR code.”</strong></li>
                        <li>Use your phone’s camera to scan the QR code displayed above.</li>
                    </ol>
                @endif

                <p class="fw-bold">You must set up your Google Authenticator app before contining.  You will be unable to login otherwise</p>

                <h2>Backup Codes</h2>
                <p>In case you lost your device.  You can use a one time code to sign in.  Save these codes somewhere safe. The code can be used once.</p>
                <p class="text-center"><strong>{{  $backupCode }}</strong></p>
                
                <div class="form-footer">
                    <a class="btn btn-primary w-100" href="{{ route('backpack.2fa.verify') }}">Complete Registration</a>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection