@extends('layouts.staff')
@section('title', 'Set up two-factor')
@section('content')
<div class="mx-auto max-w-md space-y-4">
    <h1 class="text-3xl">Set up two-factor authentication</h1>
    <p>Every staff account needs it. Scan the code with an authenticator app, then enter the 6-digit code it shows.</p>
    <div class="card space-y-4">
        <div class="mx-auto h-48 w-48 [&>svg]:h-full [&>svg]:w-full" role="img" aria-label="QR code for your authenticator app">{!! $qrSvg !!}</div>
        <p class="text-sm">Can't scan? Enter this key: <code class="rounded bg-asphalt-100 px-1 font-mono">{{ $secret }}</code></p>
        <form method="post" action="{{ route('staff.two-factor.confirm') }}" class="space-y-3" data-ajax novalidate>
            @csrf <x-form-error/>
            <x-field name="code" label="6-digit code" required inputmode="numeric" autocomplete="one-time-code" maxlength="12"/>
            <button class="btn-primary" type="submit">Turn on and continue</button>
        </form>
    </div>
</div>
@endsection