{{template "base.html" .}}

{{define "title"}}Login{{end}}

{{define "content"}}
<div class="container mx-auto px-4 py-8 max-w-md">
    <div class="flex justify-between items-center mb-8">
        <h1 class="text-3xl font-bold">Login</h1>
        <select id="theme-select" class="px-3 py-2 border rounded" style="background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--border)" onchange="changeTheme()">
            <option value="tokyo-night">Tokyo Night</option>
            <option value="dracula">Dracula</option>
            <option value="nord">Nord</option>
            <option value="solarized-dark">Solarized Dark</option>
            <option value="monokai">Monokai</option>
            <option value="one-dark-pro">One Dark Pro</option>
            <option value="material-dark">Material Dark</option>
            <option value="catppuccin-mocha">Catppuccin Mocha</option>
            <option value="catppuccin-macchiato">Catppuccin Macchiato</option>
            <option value="catppuccin-frappe">Catppuccin Frappé</option>
            <option value="catppuccin-latte">Catppuccin Latte</option>
        </select>
    </div>
    
    <form hx-post="/api/auth/login" hx-target="#result" hx-swap="innerHTML" class="card p-6 rounded-lg shadow-md border">
        <div class="mb-4">
            <label class="block mb-2" style="color: var(--text-secondary)">Email or Username</label>
            <input type="text" name="login" class="w-full px-3 py-2 border rounded" style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border)" required>
        </div>
        <div class="mb-4">
            <label class="block mb-2" style="color: var(--text-secondary)">Password</label>
            <input type="password" name="password" class="w-full px-3 py-2 border rounded" style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border)" required>
        </div>
        <button type="submit" class="btn-primary w-full py-2 rounded">
            Login
        </button>
    </form>
    
    <div id="result" class="mt-4 text-center"></div>
    
    <p class="text-center mt-4">
        <a href="/register" class="text-blue-500 hover:underline">Don't have an account? Register</a>
    </p>
</div>
<script>
    function changeTheme() {
        const theme = document.getElementById('theme-select').value;
        applyTheme(theme);
        const token = localStorage.getItem('token');
        if (token) {
            fetch('/api/auth/theme', {
                method: 'PUT',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': 'Bearer ' + token
                },
                body: JSON.stringify({ theme })
            }).catch(err => console.log('Theme save failed', err));
        }
    }
    document.addEventListener('DOMContentLoaded', () => {
        loadTheme();
        document.getElementById('theme-select').value = localStorage.getItem('theme') || 'tokyo-night';
    });
</script>
{{end}}