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

@section('body')
<div class="auth-wrap">
    <div class="mb-card auth-card">
        <h1 class="h4 fw-bold">{{ __('Two-factor authentication') }}</h1>
        <p class="mb-muted small">{{ __('Enter the code from your authenticator app.') }}</p>
        <form method="POST" action="{{ route('two-factor.login') }}">
            @csrf
            <div class="mb-3">
                <label class="form-label">{{ __('Code') }}</label>
                <input name="code" inputmode="numeric" autocomplete="one-time-code" class="form-control @error('code') is-invalid @enderror" dir="ltr" autofocus>
                @error('code')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>
            <details class="mb-3">
                <summary class="small mb-muted">{{ __('Use a recovery code') }}</summary>
                <input name="recovery_code" class="form-control mt-2 @error('recovery_code') is-invalid @enderror" dir="ltr">
                @error('recovery_code')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </details>
            <button class="btn mb-btn-primary w-100">{{ __('Verify') }}</button>
        </form>
    </div>
</div>
@endsection