@extends('theme::layouts.app', ['title' => trans('auth.title|Login')])

@section('content')
    <div class="flex-grow flex items-center justify-center px-6 pb-16 pt-10">
        <div class="w-full max-w-md">
            <div
                class="bg-white dark:bg-surface-dark rounded-2xl border border-gray-100 dark:border-gray-800 shadow-lg p-8 md:p-10">
                <div class="text-center mb-8">
                    <h2 class="text-2xl font-bold text-text-main dark:text-white mb-2">@lang('auth.heading|Login')</h2>
                    <p class="text-text-muted dark:text-gray-400 text-sm">@lang('auth.Please enter your details to sign in')</p>
                </div>

                @if (session('status'))
                    <div class="mb-4 bg-green-50 border-l-4 border-green-400 p-4">
                        <div class="flex">
                            <div class="flex-shrink-0">
                                <svg class="h-5 w-5 text-green-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                                </svg>
                            </div>
                            <div class="ml-3">
                                <p class="text-sm text-green-700">
                                    {{ session('status') }}
                                </p>
                            </div>
                        </div>
                    </div>
                @endif
    
                @if (session('warning'))
                    <div class="mb-4 bg-yellow-50 border-l-4 border-yellow-400 p-4">
                         <div class="flex">
                             <div class="ml-3">
                                <p class="text-sm text-yellow-700">{{ session('warning') }}</p>
                             </div>
                         </div>
                    </div>
                @endif

                <form class="space-y-5" action="{{ route('login') }}" method="POST" id="login-form">
                    @csrf
                    <div>
                        <label class="block text-sm font-medium text-text-main dark:text-gray-200 mb-1.5"
                            for="email">@lang('auth.Email Address')</label>
                        <input
                            class="w-full px-4 py-2.5 bg-gray-50 dark:bg-background-dark border border-gray-200 dark:border-gray-700 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all"
                            id="email" name="email" placeholder="name@company.com" required="" type="email" value="{{ old('email') }}"/>
                        @if (old('email') && $errors->has('email'))
                            <p class="mt-2 text-sm text-red-600">{{ $errors->first('email') }}</p>
                        @endif
                    </div>
                    <div>
                        <div class="flex items-center justify-between mb-1.5">
                            <label class="block text-sm font-medium text-text-main dark:text-gray-200"
                                for="password">@lang('auth.label|Password')</label>
                            <a class="text-xs font-semibold text-primary hover:text-primary-dark transition-colors"
                                href="{{ route('password.request') }}">@lang('auth.Forgot Your Password?')</a>
                        </div>
                        <div class="relative">
                            <input
                                class="w-full px-4 py-2.5 bg-gray-50 dark:bg-background-dark border border-gray-200 dark:border-gray-700 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all"
                                id="password" name="password" placeholder="••••••••" required="" type="password" />
                            {{-- Visibility toggle can be added via JS if desired, keeping simple for now matching mockup input style --}}
                        </div>
                        @if (old('email') && $errors->has('password'))
                            <p class="mt-2 text-sm text-red-600">{{ $errors->first('password') }}</p>
                        @endif
                    </div>
                    <div class="flex items-center">
                        <input class="h-4 w-4 text-primary border-gray-300 rounded focus:ring-primary/20 cursor-pointer"
                            id="remember" name="remember" type="checkbox" {{ old('remember') ? 'checked' : '' }} />
                        <label class="ml-2 block text-sm text-text-muted dark:text-gray-400 cursor-pointer"
                            for="remember">
                            @lang('auth.Remember Me')
                        </label>
                    </div>

                    @include('theme::partials.recaptcha', ['formId' => 'login-form', 'action' => 'login'])

                    <button
                        class="w-full py-3 px-4 bg-primary hover:bg-primary-dark text-white rounded-lg font-semibold transition-all shadow-lg shadow-primary/20 flex items-center justify-center gap-2 mt-2"
                        type="submit">
                        @lang('auth.button|Login')
                    </button>
                </form>
                
                @include('theme::pages.auth.social')

                <p class="text-center mt-8 text-sm text-text-muted dark:text-gray-400">
                    @lang("auth.Don't have an account yet?")
                    <a class="font-bold text-primary hover:text-primary-dark transition-colors ml-1" href="{{ route('register') }}">@lang('auth.Create an account')</a>
                </p>
            </div>
        </div>
    </div>
@endsection