@extends('components.layouts.guest')

@section('content')
    <h2 class="text-2xl text-center text-accent-blue mb-6">Register</h2>
    
    <form method="POST" action="{{ route('register') }}">
        @csrf
        
        <div>
            <label for="name" class="block text-sm font-medium mb-2">Name</label>
            <input type="text" 
                   id="name" 
                   name="name"
                   value="{{ old('name') }}"
                   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('name') border-red-500 @enderror"
                   placeholder="Enter your name"
                   required
                   autofocus>
            @error('name') 
                <span class="text-red-500 text-xs block -mt-2 mb-2">{{ $message }}</span> 
            @enderror
        </div>
        
        <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>
            @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>
            <label for="password_confirmation" class="block text-sm font-medium mb-2">Confirm Password</label>
            <input type="password" 
                   id="password_confirmation" 
                   name="password_confirmation"
                   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"
                   placeholder="Confirm your password"
                   required>
        </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">
            Register
        </button>

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