<x-auth-layout>
    <div class="card">
        <div class="card-body p-4">

            <div class="text-center mt-2">
                <h5 class="text-primary">Two-Factor Authentication</h5>
                <p class="text-muted">
                    Enter the authentication code from your app
                    <br>
                    <span class="small">or use a recovery code.</span>
                </p>
            </div>

            <div class="p-2 mt-4">
                <form method="POST" action="{{ route('two-factor.login') }}">
                    @csrf

                    {{-- AUTHENTICATOR CODE --}}
                    <div class="mb-3">
                        <label for="code" class="form-label">
                            Authentication Code
                        </label>

                        <input
                                type="text"
                                inputmode="numeric"
                                autocomplete="one-time-code"
                                name="code"
                                id="code"
                                class="form-control @error('code') is-invalid @enderror"
                                placeholder="123456"
                                autofocus
                        >

                        @error('code')
                        <span class="invalid-feedback">
                            <strong>{{ $message }}</strong>
                        </span>
                        @enderror
                    </div>

                    {{-- RECOVERY CODE --}}
                    <div class="mb-3">
                        <label for="recovery_code" class="form-label">
                            Recovery Code <span class="text-muted">(optional)</span>
                        </label>

                        <input
                                type="text"
                                name="recovery_code"
                                id="recovery_code"
                                class="form-control @error('recovery_code') is-invalid @enderror"
                                placeholder="xxxx-xxxx"
                        >

                        @error('recovery_code')
                        <span class="invalid-feedback">
                            <strong>{{ $message }}</strong>
                        </span>
                        @enderror
                    </div>

                    <div class="mt-4 text-end">
                        <button type="submit"
                                class="btn btn-primary w-sm waves-effect waves-light">
                            Verify & Continue
                        </button>
                    </div>
                </form>
            </div>

        </div>
    </div>
</x-auth-layout>
