@extends('layouts.auth')
@section('title', 'Two-factor authentication')

@section('content')
    <h1>Enter your code</h1>
    <p class="lede">Open your authenticator app and enter the six digits.</p>

    <form method="POST" action="{{ route('auth.two-factor.verify') }}">
        @csrf
        <div class="field">
            <label for="code">Authentication code</label>
            <input id="code" name="code" type="text" class="code-input" inputmode="numeric"
                   autocomplete="one-time-code" maxlength="6" autofocus>
        </div>

        <details style="margin-bottom:16px">
            <summary style="cursor:pointer;color:var(--ink-400)">Lost your device?</summary>
            <div class="field" style="margin-top:12px">
                <label for="recovery_code">Recovery code</label>
                <input id="recovery_code" name="recovery_code" type="text" autocomplete="one-time-code">
                <p class="hint">Each recovery code works once.</p>
            </div>
        </details>

        <button class="primary" type="submit">Verify and sign in</button>
    </form>
@endsection