@extends('layouts.auth')

@section('title', 'Login | Smart Dermatology')
@section('subtitle', 'Please enter your details to sign in.')

@section('content')
    <div class="text-center mb-4">
        <h3 class="fw-bold">Welcome Back</h3>
    </div>

    <form method="POST" action="{{ route('login') }}">
        @csrf
        <div class="mb-3">
            <label for="email" class="form-label">Email Address</label>
            <input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email" autofocus>
            @error('email') <span class="invalid-feedback d-block"><strong>{{ $message }}</strong></span> @enderror
        </div>
        <div class="mb-3">
            <label for="password" class="form-label">Password</label>
            <input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" required autocomplete="current-password">
            @error('password') <span class="invalid-feedback d-block"><strong>{{ $message }}</strong></span> @enderror
        </div>
        <div class="d-flex justify-content-between align-items-center mb-4">
            <div class="form-check">
                <input class="form-check-input" type="checkbox" name="remember" id="remember" {{ old('remember') ? 'checked' : '' }}>
                <label class="form-check-label small" for="remember">Remember me</label>
            </div>
            @if (Route::has('password.request'))
                <a class="auth-link small" href="{{ route('password.request') }}">Forgot Password?</a>
            @endif
        </div>
        <button type="submit" class="btn btn-pink w-100 py-3 fw-bold mb-3">Login</button>
    </form>

    <p class="text-center text-muted small mb-0">Don't have an account? <a class="auth-link" href="{{ route('register') }}">Create one</a></p>
@endsection