
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login - VividShield</title>
    <link href="/static/css/output.3614ce60f141.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/flowbite@2.5.2/dist/flowbite.min.css" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Montserrat:wght@500;600;700;800&display=swap" rel="stylesheet">
</head>
<body class="bg-gray-100 dark:bg-midnight-900 flex items-center justify-center min-h-screen font-sans">
  <div id="response"></div>
  <section class="w-full">
    <div class="flex flex-col items-center justify-center px-6 py-8 mx-auto md:h-screen lg:py-0">
        <!-- Logo -->
        <a href="#" class="flex items-center mb-6">
            <svg class="h-10 w-10 mr-3" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M20 2L4 8v12c0 10.5 6.8 17.3 16 20 9.2-2.7 16-9.5 16-20V8L20 2z"
                      class="fill-shield-800 dark:fill-white" fill-opacity="0.9"/>
                <path d="M20 5L7 10v9c0 8.4 5.4 13.8 13 16 7.6-2.2 13-7.6 13-16v-9L20 5z"
                      class="fill-white dark:fill-midnight-900"/>
                <text x="20" y="26" text-anchor="middle" class="fill-vivid-500"
                      style="font-family: Montserrat, sans-serif; font-weight: 700; font-size: 14px;">[V]</text>
            </svg>
            <span class="text-3xl font-bold font-display">
                <span class="text-shield-800 dark:text-white">Vivid</span><span class="text-vivid-500">Shield</span>
            </span>
        </a>
        <div class="w-full bg-white rounded-xl shadow-card dark:border md:mt-0 sm:max-w-md xl:p-0 dark:bg-midnight-800 dark:border-shield-700">
            <div class="p-6 space-y-4 md:space-y-6 sm:p-8">
                <h1 class="text-xl font-bold font-display leading-tight tracking-tight text-gray-900 md:text-2xl dark:text-white">
                    Sign in to your account
                </h1>
                <form class="space-y-4 md:space-y-6" method="POST" hx-post="/ajax-login/" hx-target="#response" hx-swap="innerHTML">
                    <input type="hidden" name="csrfmiddlewaretoken" value="7ProgMH76enFrXp7QKvdeaZ6bbhUVr6aB2zB7kr0ZcpEtrQSSf3SOqfY5dk97UM1">
                    <div>
                        <label for="username" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Your username</label>
                        <input type="text" name="username" id="username" class="input" placeholder="Username" required>
                    </div>
                    <div>
                        <label for="password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Password</label>
                        <input type="password" name="password" id="password" class="input" placeholder="••••••••" required>
                    </div>
                    <div id="response" class="text-red-500 text-sm"></div>
                    <button type="submit" class="btn-primary w-full">Login</button>
                </form>
            </div>
        </div>
    </div>
  </section>
  <script src="https://unpkg.com/htmx.org@1.9.6"></script>
</body>
</html>
<script>
    document.addEventListener("htmx:afterOnLoad", function(event) {
        if (event.detail.xhr.status === 200) {
            try {
                const response = JSON.parse(event.detail.xhr.responseText);
                if (response.redirect) {
                    window.location.href = response.redirect;
                }
            } catch (e) {
                // Response was not JSON — likely a redirect to the login page
                console.warn("Login response was not JSON:", e);
            }
        }
    });
</script>
