@extends('components.layouts.guest')

@section('content')
    <h2 class="text-2xl text-center text-accent-blue mb-6">Login</h2>
    
    <form method="POST" action="{{ route('login') }}">
        @csrf
        
        <div>
            <label for="email" class="block text-sm font-medium mb-2">Email</label>
            <input type="email" 
                   id="email" 
                   name="email"
                   value="{{ old('email') }}"
                   class="w-full p-2 mb-4 border rounded bg-gray-600 border-secondary text-gray-100 focus:bg-gray-900 focus:outline-none focus:border-accent-blue @error('email') border-red-500 @enderror"
                   placeholder="Enter your email"
                   required
                   autofocus>
            @error('email') 
                <span class="text-red-500 text-xs block -mt-2 mb-2">{{ $message }}</span> 
            @enderror
        </div>

        <div>
            <label for="password" class="block text-sm font-medium mb-2">Password</label>
            <input type="password" 
                   id="password" 
                   name="password"
                   class="w-full p-2 mb-4 border rounded bg-gray-600 border-secondary text-gray-100 focus:bg-gray-900 focus:outline-none focus:border-accent-blue @error('password') border-red-500 @enderror"
                   placeholder="Enter your password"
                   required>
            @error('password') 
                <span class="text-red-500 text-xs block -mt-2 mb-2">{{ $message }}</span> 
            @enderror
        </div>

        <div class="mb-4">
            <label class="inline-flex items-center">
                <input type="checkbox" 
                       name="remember"
                       class="rounded border-secondary bg-gray-600 text-primary focus:ring-accent-blue">
                <span class="ml-2 text-sm">Remember me</span>
            </label>
        </div>

        <button type="submit" class="w-full py-2 px-4 bg-primary text-white text-xl rounded hover:bg-secondary transition-colors duration-200 mb-4">
            Login
        </button>

        <div class="text-center">
            <a href="{{ route('register') }}" class="text-accent-blue hover:underline text-sm">
                Don't have an account? Register here
            </a>
        </div>
    </form>
@endsection