<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Fieldly — Login</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
    <style>
        body { background: #f1f5f9; min-height: 100vh; display: flex; align-items: center; justify-content: center; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
        .login-card { background: #fff; border-radius: 16px; padding: 40px; width: 100%; max-width: 420px; box-shadow: 0 4px 24px rgba(0,0,0,.08); }
        .brand-logo { width: 48px; height: 48px; background: #4f46e5; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 800; color: #fff; margin-bottom: 16px; }
        .form-control { font-size: 16px; border-radius: 10px; border: 1.5px solid #e2e8f0; padding: 11px 14px; }
        .form-control:focus { border-color: #4f46e5; box-shadow: 0 0 0 3px rgba(79,70,229,.12); }
        .btn-login { background: #4f46e5; border: none; border-radius: 10px; padding: 12px; font-size: 15px; font-weight: 700; }
        .btn-login:hover { background: #4338ca; }
    </style>
</head>
<body>
    <div class="login-card">
        <div class="brand-logo">F</div>
        <h1 class="h4 fw-bold mb-1">Welcome back</h1>
        <p class="text-muted mb-4" style="font-size:14px">Sign in to your Fieldly account</p>

        <?php if ($error ?? null): ?>
            <div class="alert alert-danger py-2" style="font-size:14px"><?= esc($error) ?></div>
        <?php endif; ?>
        <?php if ($success ?? null): ?>
            <div class="alert alert-success py-2" style="font-size:14px"><?= esc($success) ?></div>
        <?php endif; ?>

        <form action="/login" method="POST">
            <?= csrf_field() ?>
            <div class="mb-3">
                <label class="form-label fw-semibold" style="font-size:13px">Email address</label>
                <input type="email" name="email" class="form-control" placeholder="you@company.com" required autocomplete="email"/>
            </div>
            <div class="mb-4">
                <label class="form-label fw-semibold" style="font-size:13px">Password</label>
                <input type="password" name="password" class="form-control" placeholder="••••••••" required autocomplete="current-password"/>
            </div>
            <button type="submit" class="btn btn-primary btn-login w-100 text-white">Sign In</button>
        </form>

        <div class="text-center mt-3">
            <a href="/forgot-password" style="font-size:13px;color:#4f46e5">Forgot your password?</a>
        </div>
    </div>
</body>
</html>
