@extends('layouts.auth')

@section('title', 'Confirm Password')

@section('content')
<div class="animate-fade-in">
    <!-- Header -->
    <div class="mb-9">
        <div
            class="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-[var(--c-primary)]/10 border border-[var(--c-primary)]/20 mb-4 animate-pulse">
            <span class="w-1.5 h-1.5 rounded-full bg-[var(--c-primary)]"></span>
            <span class="text-[10px] font-bold uppercase tracking-[0.2em] text-[var(--c-primary)]">Security Check</span>
        </div>
        <h2 class="syne text-3xl font-black text-white mb-2.5 tracking-tight">Confirm Password</h2>
        <p class="text-text-dim text-sm font-medium leading-relaxed">
            This is a secure area of the application. Please confirm your password before continuing.
        </p>
    </div>

    <!-- Alerts -->
    @if ($errors->any())
    <div class="alert-error mb-5">{{ $errors->first() }}</div>
    @endif

    <!-- Form -->
    <form method="POST" action="{{ route('password.confirm') }}" class="space-y-4">
        @csrf

        <div class="field-wrap">
            <label for="password">Password</label>
            <input id="password" name="password" type="password" required autofocus placeholder="••••••••"
                class="field-input">
        </div>

        <button type="submit" class="btn-submit">
            <div class="shimmer absolute inset-0 bg-gradient-to-r from-transparent via-white/10 to-transparent"></div>
            <span class="relative z-10 flex items-center justify-center gap-2">
                Confirm Access
                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M14 5l7 7m0 0l-7 7m7-7H3" />
                </svg>
            </span>
        </button>
    </form>
</div>
@endsection