@extends('layouts.app')

@section('title', 'Login | PairingPal')

@section('content')
    <div class="auth-shell">
        <div class="row justify-content-center w-100 mx-0">
            <div class="col-12 col-sm-10 col-md-8 col-lg-6 col-xl-5">
                <div class="card auth-card">
                    <div class="card-body p-4 p-md-5">
                        <div class="d-flex flex-column gap-3 mb-4">
                            <span class="auth-badge">✈️ Crew planning workspace</span>
                            <div>
                                <h1 class="auth-title fw-semibold mb-2">Welcome back to PairingPal</h1>
                                <p class="auth-subtitle mb-0">Sign in to manage pairings, monthly schedules, and bid period workflows.</p>
                            </div>
                        </div>

                        <div class="auth-panel small mb-4" role="alert">
                            Local development only: default admin credentials are intended for local testing.
                        </div>

                        <form method="POST" action="{{ route('login') }}" class="d-grid gap-3">
                            @csrf

                            <div>
                                <label for="username" class="form-label fw-medium mb-1">Username</label>
                                <input id="username" type="text" name="username" value="{{ old('username') }}" class="form-control auth-input @error('username') is-invalid @enderror" autocomplete="username" required autofocus>
                                @error('username')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div>
                                <div class="d-flex justify-content-between align-items-center mb-1">
                                    <label for="password" class="form-label fw-medium mb-0">Password</label>
                                </div>
                                <input id="password" type="password" name="password" class="form-control auth-input @error('password') is-invalid @enderror" autocomplete="current-password" required>
                                @error('password')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="form-check mt-1">
                                <input class="form-check-input" type="checkbox" value="1" id="remember" name="remember">
                                <label class="form-check-label text-secondary" for="remember">Keep me signed in on this device</label>
                            </div>

                            <button type="submit" class="btn btn-primary auth-submit mt-2">Sign in</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection