<x-site-layout title="Contributor Login" meta-description="Log in to your contributor account">
    <div class="min-h-screen flex items-center justify-center bg-theme-body py-12 px-4 sm:px-6 lg:px-8">
        <div class="max-w-md w-full space-y-8">
            <!-- Header -->
            <div class="text-center">
                <a href="{{ route('public.discussions.index') }}" class="inline-block">
                    <h2 class="text-3xl font-bold text-theme-heading">Discussion Boards</h2>
                </a>
                <p class="mt-2 text-sm text-theme-body">
                    Welcome back, contributor!
                </p>
            </div>

            <!-- Login Card -->
            <div class="theme-card rounded-lg shadow-xl p-8">
                <div class="text-center mb-6">
                    <h3 class="text-xl font-semibold text-theme-heading">Sign In</h3>
                    <p class="mt-1 text-sm text-theme-body">
                        Access your contributor dashboard
                    </p>
                </div>

                <!-- Session Status -->
                @if (session('status'))
                    <div class="mb-4 p-4 bg-blue-100 border border-blue-400 text-blue-700 rounded-lg">
                        {{ session('status') }}
                    </div>
                @endif

                <!-- Success Message -->
                @if (session('success'))
                    <div class="mb-4 p-4 bg-green-100 border border-green-400 text-green-700 rounded-lg">
                        {{ session('success') }}
                    </div>
                @endif

                <!-- Error Message -->
                @if (session('error'))
                    <div class="mb-4 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg">
                        {{ session('error') }}
                    </div>
                @endif

                <!-- Form -->
                <form method="POST" action="{{ route('login') }}" x-data="{ showPassword: false }">
                    @csrf

                    <!-- Email -->
                    <div class="mb-4">
                        <label for="email" class="block text-sm font-medium text-theme-heading mb-2">
                            Email Address
                        </label>
                        <div class="relative">
                            <span class="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-400">
                                <i class="fas fa-envelope"></i>
                            </span>
                            <input 
                                id="email" 
                                type="email" 
                                name="email" 
                                value="{{ old('email') }}"
                                class="w-full pl-10 pr-4 py-3 border rounded-lg bg-theme-card text-theme-body focus:ring-2 focus:ring-theme-primary focus:border-transparent @error('email') border-red-500 @else border-gray-300 @enderror"
                                placeholder="Enter your email address"
                                required
                                autofocus
                            >
                        </div>
                        @error('email')
                            <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Password -->
                    <div class="mb-4">
                        <label for="password" class="block text-sm font-medium text-theme-heading mb-2">
                            Password
                        </label>
                        <div class="relative">
                            <span class="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-400">
                                <i class="fas fa-lock"></i>
                            </span>
                            <input 
                                id="password" 
                                :type="showPassword ? 'text' : 'password'" 
                                name="password" 
                                class="w-full pl-10 pr-12 py-3 border rounded-lg bg-theme-card text-theme-body focus:ring-2 focus:ring-theme-primary focus:border-transparent @error('password') border-red-500 @else border-gray-300 @enderror"
                                placeholder="Enter your password"
                                required
                            >
                            <button 
                                type="button" 
                                @click="showPassword = !showPassword"
                                class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600"
                            >
                                <i :class="showPassword ? 'fas fa-eye-slash' : 'fas fa-eye'"></i>
                            </button>
                        </div>
                        @error('password')
                            <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Remember Me -->
                    <div class="flex items-center justify-between mb-6">
                        <label class="flex items-center">
                            <input 
                                type="checkbox" 
                                name="remember" 
                                class="rounded border-gray-300 text-theme-primary focus:ring-theme-primary"
                            >
                            <span class="ml-2 text-sm text-theme-body">Remember me</span>
                        </label>

                        @if (Route::has('password.request'))
                            <a href="{{ route('password.request') }}" class="text-sm text-theme-link hover:underline">
                                Forgot password?
                            </a>
                        @endif
                    </div>

                    <!-- Submit Button -->
                    <button 
                        type="submit" 
                        class="w-full theme-btn-primary py-3 rounded-lg font-semibold transition-all hover:opacity-90 focus:ring-2 focus:ring-offset-2 focus:ring-theme-primary"
                    >
                        <i class="fas fa-sign-in-alt mr-2"></i>
                        Sign In
                    </button>
                </form>

                <!-- Divider -->
                <div class="mt-6 flex items-center">
                    <div class="flex-1 border-t theme-divider"></div>
                    <span class="px-4 text-sm text-theme-body">or</span>
                    <div class="flex-1 border-t theme-divider"></div>
                </div>

                <!-- Register Link -->
                <div class="mt-6 text-center">
                    <p class="text-sm text-theme-body">
                        New to the discussion boards? 
                        <a href="{{ route('public.contributor.register') }}" class="text-theme-link font-semibold hover:underline">
                            Create an account
                        </a>
                    </p>
                </div>
            </div>

            <!-- Back to Discussions -->
            <div class="text-center">
                <a href="{{ route('public.discussions.index') }}" class="text-theme-link hover:underline">
                    <i class="fas fa-arrow-left mr-2"></i>
                    Back to Discussions
                </a>
            </div>
        </div>
    </div>
</x-site-layout>
