@extends('layouts.auth')

@section('content')
@php
/**
 * Second-factor challenge. Reached only while a sign-in is parked: the password was
 * accepted and no session exists yet, so this posts back to /login — the same door — and
 * the code is what completes it.
 *
 * Mirrors auth/reset.php exactly: .qm-auth-title / .qm-auth-sub / .qm-auth-form, one
 * .qm-auth-foot below. No new look, because this is the same screen wearing a different
 * question.
 */
@endphp
<h1 class="qm-auth-title">{{ t_raw('auth.two_factor_title') }}</h1>
<p class="qm-auth-sub">{{ t_raw('auth.two_factor_sub') }}</p>

<form method="post" action="{{ route('login') }}" class="qm-auth-form" data-validate novalidate>
    @csrf
    <div class="mb-3">
        <label for="code" class="form-label">{{ t_raw('auth.two_factor_code_label') }}</label>
        <input type="text" id="code" name="code" class="form-control" inputmode="numeric" pattern="\d{6}"
               maxlength="6" autocomplete="one-time-code" data-label="{{ t_raw('auth.two_factor_code_label') }}"
               required autofocus placeholder="{{ t_raw('auth.two_factor_code_placeholder') }}">
    </div>
    <button type="submit" class="qm-btn w-100">{{ t_raw('common.sign_in') }}</button>
</form>

<div class="qm-auth-or" role="separator"><span>{{ t_raw('auth.or_separator') }}</span></div>

<form method="post" action="{{ route('login') }}" class="qm-auth-form">
    @csrf
    <div class="mb-3">
        <label for="recovery_code" class="form-label">{{ t_raw('auth.recovery_code_label') }}</label>
        <input type="text" id="recovery_code" name="recovery_code" class="form-control" maxlength="9"
               autocomplete="off" placeholder="{{ t_raw('auth.recovery_code_placeholder') }}">
    </div>
    <button type="submit" class="qm-btn qm-btn-outline w-100">{{ t_raw('auth.use_recovery_code_btn') }}</button>
</form>

<form method="post" action="{{ route('login') }}">
    @csrf
    <p class="qm-auth-foot"><button type="submit" name="cancel" value="1" class="qm-auth-link">{{ t_raw('auth.back_to_sign_in') }}</button></p>
</form>
@endsection