@extends('layouts.auth')

@section('title', 'Set up Google Authenticator')

@section('content')
    <h2>Set up Google Authenticator</h2>
    <p class="lead">Scan this QR code, then enter the 6-digit code from your authenticator app.</p>

    <div class="form-row" style="display:flex;justify-content:center">
        <div aria-label="Google Authenticator QR code">
            {!! $qrCodeSvg !!}
        </div>
    </div>

    <div class="form-row">
        <label>Manual setup key</label>
        <input type="text" value="{{ $secret }}" readonly onclick="this.select()">
    </div>

    <form method="POST" action="{{ route('mandatory-two-factor.setup.store') }}">
        @csrf
        <div class="form-row">
            <label for="code">Authentication code</label>
            <input id="code" type="text" inputmode="numeric" name="code" autofocus autocomplete="one-time-code" required>
        </div>
        <button type="submit" class="btn-primary">Verify and sign in</button>
    </form>
@endsection