<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login - Astron Hosts Expense Tracker</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body.dark-mode {
            background-color: #181a1b !important;
            color: #f1f1f1 !important;
        }
        .dark-mode .card, .dark-mode .navbar {
            background-color: #23272b !important;
            color: #f1f1f1 !important;
        }
        .dark-mode .form-control {
            background-color: #23272b;
            color: #f1f1f1;
            border-color: #444;
        }
        .dark-mode .form-control:focus {
            background-color: #23272b;
            color: #f1f1f1;
        }
        .dark-mode .btn-close {
            filter: invert(1);
        }
    </style>
</head>
<body class="bg-light" style="background: linear-gradient(135deg, #e0eafc 0%, #cfdef3 100%); min-height: 100vh;">
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary mb-4 shadow-sm">
        <div class="container-fluid">
            <a class="navbar-brand d-flex align-items-center gap-2" href="#">
                <span style="font-size:2rem;">💼</span>
                <span style="font-weight:600; letter-spacing:1px;">Astron Hosts Expense Tracker</span>
            </a>
            <div class="d-flex gap-2">
                <button id="darkModeToggle" class="btn btn-outline-light me-2" type="button">🌙 Dark Mode</button>
            </div>
        </div>
    </nav>
    <div class="container d-flex align-items-center justify-content-center min-vh-100">
        <div class="card shadow-lg p-4 rounded-4 border-0" style="min-width: 350px; max-width: 400px; background: #fff;">
            <div class="text-center mb-3">
                <span style="font-size:3rem;">🔒</span>
            </div>
            <h2 class="mb-4 text-center display-6" style="font-weight:700; letter-spacing:1px;">Admin Login</h2>
            {% if form.errors %}
                <div class="alert alert-danger">Invalid username or password.</div>
            {% endif %}
            <form method="post" novalidate>
                {% csrf_token %}
                <div class="mb-3">
                    <label for="id_username" class="form-label">Username</label>
                    <input type="text" name="username" class="form-control rounded-3" id="id_username" required autofocus>
                </div>
                <div class="mb-3">
                    <label for="id_password" class="form-label">Password</label>
                    <input type="password" name="password" class="form-control rounded-3" id="id_password" required>
                </div>
                <button type="submit" class="btn btn-primary w-100 rounded-3 py-2 fw-bold" style="font-size:1.1rem;">Login</button>
            </form>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const toggle = document.getElementById('darkModeToggle');
            const body = document.body;
            if (localStorage.getItem('darkMode') === 'enabled') {
                body.classList.add('dark-mode');
            }
            toggle.addEventListener('click', function() {
                body.classList.toggle('dark-mode');
                if (body.classList.contains('dark-mode')) {
                    localStorage.setItem('darkMode', 'enabled');
                } else {
                    localStorage.setItem('darkMode', 'disabled');
                }
            });
        });
    </script>
</body>
</html>