@extends('layouts.app')

@section('title', __('Two-factor authentication'))

@section('content')
    <div class="min-h-screen flex items-center justify-center py-12 px-4">
        <div class="max-w-md w-full">
            <div class="text-center mb-8">
                <div class="w-14 h-14 mx-auto mb-4 rounded-xl bg-primary-500 flex items-center justify-center">
                    <i class="fas fa-shield-alt text-white text-2xl"></i>
                </div>
                <h1 class="text-2xl font-bold text-gray-900 dark:text-white">{{ __('Two-factor authentication') }}</h1>
                <p class="mt-2 text-gray-600 dark:text-gray-400 text-sm">{{ __('Enter the 6-digit code from your authenticator app.') }}</p>
            </div>

            <div class="bg-white dark:bg-dark-800 rounded-2xl shadow-xl border border-gray-200 dark:border-dark-700 p-8">
                <form method="POST" action="{{ route('two-factor.verify') }}">
                    @csrf
                    <div class="mb-6">
                        <label for="code" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">{{ __('Authentication code') }}</label>
                        <input
                            id="code"
                            type="text"
                            name="code"
                            inputmode="numeric"
                            pattern="[0-9]{6}"
                            maxlength="6"
                            required
                            autofocus
                            autocomplete="one-time-code"
                            class="w-full text-center text-2xl font-mono tracking-[0.5em] py-3 rounded-xl border border-gray-300 dark:border-dark-600 bg-gray-50 dark:bg-dark-700 text-gray-900 dark:text-white @error('code') border-red-500 @enderror"
                            placeholder="000000"
                        >
                        @error('code')
                            <p class="mt-2 text-sm text-red-500">{{ $message }}</p>
                        @enderror
                    </div>
                    <button type="submit" class="w-full py-3 rounded-xl bg-primary-600 hover:bg-primary-700 text-white font-semibold">
                        {{ __('Continue') }}
                    </button>
                </form>
                <p class="mt-6 text-center text-sm text-gray-500">
                    <a href="{{ route('login') }}" class="text-primary-500 hover:underline">{{ __('Back to login') }}</a>
                </p>
            </div>
        </div>
    </div>
@endsection
