@extends('layouts.guest')

@section('title', 'Login - Academic Result Management')
@section('heading', 'Welcome Back')
@section('description', 'Sign in to access the system')
@section('mobile-heading', 'Welcome Back')
@section('mobile-description', 'Sign in to access the system')

@section('content')
    <form method="POST" action="{{ route('login') }}" class="space-y-5">
        @csrf

        <x-input-group id="email" name="email" type="email" value="{{ old('email') }}" label="Email Address" placeholder="you@example.com">
            <x-slot:left>
                <i class="fa-solid fa-envelope text-gray-400"></i>
            </x-slot:left>
        </x-input-group>

        <x-input-group id="password" name="password" type="password" label="Password" placeholder="••••••••">
            <x-slot:left>
                <i class="fa-solid fa-lock text-gray-400"></i>
            </x-slot:left>

            <x-slot:right>
                <button type="button" data-toggle="password" data-target="#password">
                    <i class="fa-solid fa-eye text-gray-400 hover:text-primary"></i>
                </button>
            </x-slot:right>
        </x-input-group>

        <div class="flex items-center justify-between">
            <div class="flex items-center">
                <input type="checkbox" id="remember_me" name="remember_me" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 shadow-sm rounded">
                <label for="remember_me" class="ml-2 block text-sm text-gray-700">{{ __('Remember me') }}</label>
            </div>
            @if (Route::has('password.request'))
                <a class="text-sm text-primary hover:text-blue-900 font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" href="{{ route('password.request') }}">
                    {{ __('Forgot your password?') }}
                </a>
            @endif
        </div>

        @if(session('error'))
            <div class="alert alert-danger">
                {{ session('error') }}
            </div>
        @endif

        <div class="flex items-center justify-center mt-5">
            <x-primary-button class="w-full">
                {{ __('Sign In') }}
            </x-primary-button>
        </div>
    </form>
@endsection