@extends('auth.layout')

@section('content')
<h1>Scan QR Code</h1>
<p style="font-size:.875rem;color:#aaa;margin-bottom:1.25rem;">Scan this QR code with your authenticator app, then enter the six-digit code below.</p>

{% if flash.get("error") %}
<div class="alert-error">{{ flash.get("error") }}</div>
{% endif %}

<div style="text-align:center;margin-bottom:1.25rem;">
    <div id="qrcode" style="display:inline-block;background:#fff;padding:1rem;border-radius:8px;"></div>
    <p style="font-size:.75rem;color:#aaa;margin-top:.75rem;word-break:break-all;">Manual key: <code>{{ secret }}</code></p>
</div>

<form method="POST" action="/two-factor/confirm">
    <input type="hidden" name="_token" value="{{ csrf_token }}">
    <div class="field">
        <label for="code">Verification code</label>
        <input id="code" name="code" type="text" inputmode="numeric" autocomplete="one-time-code"
            maxlength="6" pattern="[0-9]{6}" required autofocus
            placeholder="000000" style="text-align:center;font-size:1.25rem;letter-spacing:.2em;">
    </div>
    <button type="submit" class="btn-submit">Enable Two-Factor Authentication</button>
</form>

<script src="https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js"></script>
<script>
  new QRCode(document.getElementById("qrcode"), {
    text: {{ qr_url | tojson }},
    width: 180,
    height: 180,
  });
</script>
@endsection