@extends('layouts.app')

@section('title', 'Enable Two-Factor Authentication')

@section('content')
<x-page-header title="Enable Two-Factor Authentication" subtitle="Scan the QR code with Google Authenticator, Authy, or a compatible app" icon="shield" icon-color="emerald">
    @if (!$required)
        <x-slot:actions>
            <a href="{{ route('account.security') }}" class="btn-ghost btn-sm">Cancel</a>
        </x-slot:actions>
    @endif
</x-page-header>

<div class="max-w-2xl glass-card p-5 sm:p-6 animate-slide-up">
    @if ($required)
        <div class="flash-warning mb-6">
            Your administrator requires two-factor authentication for all users. Complete setup to continue.
        </div>
    @endif

    <div class="grid sm:grid-cols-2 gap-6 mb-6">
        <div class="rounded-xl border border-themed bg-themed-subtle p-4 flex items-center justify-center">
            <div class="bg-white p-3 rounded-lg">{!! $qrSvg !!}</div>
        </div>
        <div class="text-sm space-y-3">
            <p class="text-themed-muted">If you cannot scan the QR code, enter this secret manually in your authenticator app:</p>
            <code class="block rounded-lg border border-themed bg-black/20 px-3 py-2 text-xs break-all">{{ $secret }}</code>
            <p class="text-themed-muted text-xs">Account: {{ auth()->user()->email }}</p>
        </div>
    </div>

    <form method="POST" action="{{ route('two-factor.confirm') }}" class="space-y-4">
        @csrf
        <div>
            <label class="field-label" for="code">Confirm with a 6-digit code</label>
            <input id="code" type="text" name="code" inputmode="numeric" autocomplete="one-time-code" required
                   class="field-input max-w-xs text-center tracking-[0.3em]">
            @error('code')
                <p class="text-sm text-red-400 mt-2">{{ $message }}</p>
            @enderror
        </div>
        <button type="submit" class="btn-primary">Enable two-factor authentication</button>
    </form>
</div>
@endsection