@extends('layouts.app')

@section('content')
<div class="container d-flex justify-content-center align-items-center" style="min-height: 80vh;">
    <div class="bento-card col-4" style="max-width: 450px;">
        <h2 class="h4 fw-bold mb-4 text-center">Welcome Back</h2>
        
        <form action="{{ route('login') }}" method="POST">
            @csrf
            <div class="mb-4">
                <label class="small text-muted mb-2">Email Address</label>
                <input type="email" name="email" class="form-glass" placeholder="name@example.com" required>
            </div>
            
            <div class="mb-4">
                <label class="small text-muted mb-2">Password</label>
                <input type="password" name="password" class="form-glass" placeholder="••••••••" required>
            </div>

            <div class="d-flex justify-content-between mb-4 small">
                <div class="form-check">
                    <input type="checkbox" class="form-check-input" id="remember">
                    <label class="text-muted" for="remember">Remember me</label>
                </div>
                <a href="/forgot-password" class="text-primary text-decoration-none">Forgot?</a>
            </div>

            <button type="submit" class="btn-amwal w-100 justify-content-center">Sign In</button>
        </form>

        <p class="text-center text-muted small mt-4">
            New here? <a href="/register" class="text-white text-decoration-none fw-bold">Create an account</a>
        </p>
    </div>
</div>
@endsection