<x-guest-layout>
    <div class="mb-7">
        <span class="inline-flex items-center gap-2 rounded-lg bg-indigo-50 px-3 py-1.5 text-xs font-black uppercase text-indigo-600 dark:bg-indigo-500/10 dark:text-indigo-300">
            <span class="material-symbols-outlined text-base">mark_email_read</span>
            Email verification
        </span>
        <h1 class="mt-4 text-3xl font-black leading-tight text-slate-950 dark:text-white" style="font-family: Manrope, Inter, sans-serif;">Enter your verification code</h1>
        <p class="urless-auth-muted mt-3 text-sm font-semibold leading-6 text-slate-600 dark:text-zinc-300">
            We sent a 6 digit code to <strong>{{ auth()->user()->email }}</strong>. Your dashboard stays locked until this email is verified.
        </p>
    </div>

    @if (session('status') == 'verification-code-sent')
        <div class="mb-4 rounded-lg border border-emerald-100 bg-emerald-50 px-4 py-3 text-sm font-bold text-emerald-700 dark:border-emerald-500/20 dark:bg-emerald-500/10 dark:text-emerald-300">
            {{ __('A new verification code has been sent to your email address.') }}
        </div>
    @endif

    @if (session('status') == 'verification-code-send-failed')
        <div class="mb-4 rounded-lg border border-amber-200 bg-amber-50 px-4 py-3 text-sm font-bold text-amber-800 dark:border-amber-500/20 dark:bg-amber-500/10 dark:text-amber-200">
            {{ session('verification_send_error', __('We could not email the verification code. Please check your mailer settings and try again.')) }}
        </div>
    @endif

    <form method="POST" action="{{ route('verification.verify') }}" class="space-y-5">
        @csrf

        <div>
            <x-input-label for="code" :value="__('Verification code')" />
            <div class="relative mt-2">
                <span class="material-symbols-outlined pointer-events-none absolute left-4 top-1/2 -translate-y-1/2 text-xl text-slate-400">pin</span>
                <x-text-input id="code" class="block w-full pl-12 text-center text-2xl font-black tracking-[0.45em]" type="text" name="code" inputmode="numeric" pattern="[0-9]{6}" maxlength="6" required autofocus autocomplete="one-time-code" placeholder="000000" />
            </div>
            <x-input-error :messages="$errors->get('code')" class="mt-2" />
        </div>

        <x-primary-button class="w-full rounded-lg bg-indigo-600 py-4 text-base shadow-lg shadow-indigo-600/20 hover:bg-indigo-700">
            {{ __('Verify account') }}
        </x-primary-button>
    </form>

    <div class="mt-5 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
        <form method="POST" action="{{ route('verification.send') }}" class="sm:flex-1">
            @csrf

            <button type="submit" class="w-full rounded-lg border border-slate-200 px-4 py-3 text-sm font-extrabold text-slate-700 transition hover:border-indigo-200 hover:text-indigo-600 dark:border-zinc-700 dark:text-zinc-200 dark:hover:border-indigo-400 dark:hover:text-indigo-300">
                {{ __('Resend code') }}
            </button>
        </form>

        <form method="POST" action="{{ route('logout') }}" class="sm:flex-1">
            @csrf

            <button type="submit" class="w-full rounded-lg border border-slate-200 px-4 py-3 text-sm font-extrabold text-slate-500 transition hover:border-rose-200 hover:text-rose-600 dark:border-zinc-700 dark:text-zinc-300 dark:hover:border-rose-400 dark:hover:text-rose-300">
                {{ __('Log Out') }}
            </button>
        </form>
    </div>
</x-guest-layout>
