@extends('admin.layout')

@section('title', 'Set up two-step sign-in')

@section('content')
    <div class="narrow">
        <h1>Set up two-step sign-in</h1>
        @include('partials.errors')
        <form class="card form" method="post" action="{{ route('admin.mfa.setup.confirm') }}" novalidate>
            @csrf
            <p>Admin sign-in now needs a code from an authenticator app as well as your password. This takes a minute, once.</p>
            <ol class="steps-list">
                <li>Open an authenticator app on your phone: Google Authenticator, Microsoft Authenticator, 1Password, Authy or similar.</li>
                <li>Add an account and scan this code:
                    <div class="qr" id="mfa-qr" data-uri="{{ $uri }}" role="img" aria-label="QR code for setting up healthcareers.app in an authenticator app"></div>
                    <details class="small"><summary>Can't scan? Type this key instead</summary>
                        <p class="mono key">{{ trim(chunk_split($secret, 4, ' ')) }}</p>
                        <p class="muted">Account: {{ $admin->email }} · Type: time-based</p>
                    </details>
                </li>
                <li>Type the 6-digit code the app shows:</li>
            </ol>
            <div class="field">
                <label for="code">Code</label>
                <input id="code" name="code" class="code-input" inputmode="numeric" autocomplete="one-time-code" maxlength="8" required>
            </div>
            <button class="btn primary" type="submit">Turn on and sign in</button>
            <p class="small muted">Next you'll get 10 backup codes for when your phone isn't handy.</p>
        </form>
    </div>
@endsection

@push('scripts')
    <script src="{{ asset_v('js/vendor/qrcode.min.js') }}"></script>
    <script>
      (function () {
        var el = document.getElementById('mfa-qr');
        if (!el || typeof qrcode === 'undefined') return;
        var qr = qrcode(0, 'M');
        qr.addData(el.getAttribute('data-uri'));
        qr.make();
        el.innerHTML = qr.createSvgTag({ cellSize: 5, margin: 3, scalable: true });
      })();
    </script>
@endpush