<!DOCTYPE html>
<html lang="de" class="dark">
<head>
    <%- include('partials/head') %>
    <style>
        body { background: linear-gradient(135deg, #1e3a8a 0%, #1f2937 100%); }
    </style>
</head>
<body class="min-h-screen flex items-center justify-center px-4">
    <div class="w-full max-w-sm">
        <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-2xl p-8">
            <div class="flex flex-col items-center mb-6">
                <svg class="w-12 h-12 text-blue-600 dark:text-blue-400 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                </svg>
                <h1 class="text-xl font-bold text-gray-800 dark:text-white">NextJobs</h1>
                <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Bitte anmelden</p>
            </div>

            <% if (error) { %>
                <div class="mb-4 rounded-md bg-red-50 dark:bg-red-900/30 px-4 py-2.5 text-sm text-red-700 dark:text-red-300 ring-1 ring-red-200 dark:ring-red-800">
                    <%= error %>
                </div>
            <% } %>

            <form method="POST" action="/login" class="space-y-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1" for="username">Benutzername</label>
                    <input id="username" name="username" type="text" required autofocus
                           value="<%= username %>"
                           class="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-3 py-2 text-gray-800 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none" />
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1" for="password">Passwort</label>
                    <input id="password" name="password" type="password" required
                           class="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-3 py-2 text-gray-800 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none" />
                </div>
                <label class="flex items-center gap-2 cursor-pointer select-none">
                    <input id="dauerhaft" name="dauerhaft" type="checkbox" value="1" <%= dauerhaft ? 'checked' : '' %>
                           class="rounded border-gray-300 dark:border-gray-600 text-blue-600 focus:ring-blue-500" />
                    <span class="text-sm text-gray-700 dark:text-gray-300">Angemeldet bleiben</span>
                </label>
                <button type="submit"
                        class="w-full rounded-lg bg-blue-600 hover:bg-blue-700 transition-colors text-white font-medium py-2.5">
                    Anmelden
                </button>
            </form>
        </div>
    </div>
</body>
</html>