@extends('layouts.auth')
@section('title', 'Sign In')
@section('content')
    <h2 class="text-xl font-semibold text-white mb-6">Sign in to your account</h2>
    <form method="POST" action="{{ route('auth.login') }}" class="space-y-5">
        @csrf
        <div>
            <label class="block text-sm font-medium text-slate-300 mb-2">Email address</label>
            <input type="email" name="email" value="{{ old('email') }}" placeholder="you@example.com" autofocus required
                class="w-full px-4 py-3 rounded-xl bg-white/5 border border-white/10 text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:border-transparent transition @error('email') border-red-500/50 @enderror">
            @error('email')<p class="mt-2 text-sm text-red-400">{{ $message }}</p>@enderror
        </div>
        <div>
            <div class="flex items-center justify-between mb-2">
                <label class="text-sm font-medium text-slate-300">Password</label>
                <a href="{{ route('auth.forgot-password') }}" class="text-xs text-brand-400 hover:text-brand-300 transition">Forgot password?</a>
            </div>
            <input type="password" name="password" placeholder="••••••••" required
                class="w-full px-4 py-3 rounded-xl bg-white/5 border border-white/10 text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:border-transparent transition">
            @error('password')<p class="mt-2 text-sm text-red-400">{{ $message }}</p>@enderror
        </div>
        @if(session('show_resend'))
            <div class="p-4 rounded-xl bg-amber-500/10 border border-amber-500/20">
                <p class="text-amber-300 text-sm mb-3">Your email is not verified yet.</p>
                <form method="POST" action="{{ route('auth.resend') }}">
                    @csrf
                    <input type="hidden" name="email" value="{{ old('email') }}">
                    <button type="submit" class="text-sm text-amber-300 underline hover:no-underline">Resend verification email</button>
                </form>
            </div>
        @endif
        <button type="submit" class="w-full py-3 px-4 bg-brand-500 hover:bg-brand-600 text-white font-semibold rounded-xl transition shadow-lg shadow-brand-500/25 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 focus:ring-offset-slate-900">
            Sign in
        </button>
    </form>
    <p class="mt-6 text-center text-sm text-slate-400">
        Don't have an account? <a href="{{ route('auth.register') }}" class="text-brand-400 hover:text-brand-300 font-medium transition">Create one free</a>
    </p>
@endsection