@extends('layouts.guest')

@section('title', __('auth::messages.profile.two_factor'))

@section('content')
    <x-px.panel>
        <form method="POST" action="{{ route('two-factor.login') }}" x-data>
            @csrf

            <p class="px-hint">{{ __('auth.two_factor_intro') }}</p>

            <x-form.input name="code" :label="__('auth.two_factor_code')"
                          inputmode="numeric" autocomplete="one-time-code" autofocus />

            <details class="mb-3">
                <summary class="px-hint">{{ __('auth.two_factor_lost_device') }}</summary>
                <div class="mt-2">
                    <x-form.input name="recovery_code" :label="__('auth.two_factor_recovery_code')"
                                  autocomplete="one-time-code" />
                </div>
            </details>

            <button type="submit" class="btn px-btn-primary w-100">{{ __('auth.sign_in') }}</button>
        </form>
    </x-px.panel>
@endsection