@extends('layouts.auth')

@section('content')
    <h2 class="text-lg font-bold text-slate-800 mb-6 text-center">Sign in to your account</h2>

    @if ($errors->any())
        <div class="mb-4 bg-red-50 border-l-4 border-red-500 p-4 text-red-700 text-sm rounded">
            <ul class="list-disc list-inside">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form method="POST" action="{{ route('login') }}" class="space-y-5">
        @csrf
        <div>
            <label for="email" class="block text-xs font-semibold text-slate-700 uppercase tracking-wider mb-2">Email Address</label>
            <input type="email" name="email" id="email" value="{{ old('email') }}" required autofocus
                class="w-full px-3 py-2 border border-slate-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-harcourts-blue focus:border-harcourts-blue text-sm">
        </div>

        <div>
            <label for="password" class="block text-xs font-semibold text-slate-700 uppercase tracking-wider mb-2">Password</label>
            <input type="password" name="password" id="password" required
                class="w-full px-3 py-2 border border-slate-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-harcourts-blue focus:border-harcourts-blue text-sm">
        </div>

        <div class="flex items-center justify-between text-sm">
            <label class="flex items-center text-slate-600 cursor-pointer">
                <input type="checkbox" name="remember" class="rounded border-slate-300 text-harcourts-blue focus:ring-harcourts-blue mr-2">
                Remember me
            </label>
        </div>

        <div>
            <button type="submit" class="w-full py-2.5 px-4 bg-harcourts-blue hover:bg-blue-700 text-white font-semibold text-sm rounded-md shadow focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-harcourts-blue transition-colors">
                Sign In
            </button>
        </div>
    </form>
@endsection
