{% extends "base.html" %}
{% block title %}Log ind{% endblock %}
{% block content %}
<div style="max-width:400px;margin:60px auto;">
    <div class="card">
        <h1 style="text-align:center;">⚡ Pokedexter</h1>
        <p style="text-align:center;color:var(--text-muted);margin-bottom:20px;">Log ind for at fortsætte</p>
        <form id="login-form">
            <div style="margin-bottom:12px;">
                <label style="display:block;margin-bottom:4px;font-size:0.9rem;">Brugernavn</label>
                <input type="text" name="username" required autocomplete="username">
            </div>
            <div style="margin-bottom:20px;">
                <label style="display:block;margin-bottom:4px;font-size:0.9rem;">Adgangskode</label>
                <input type="password" name="password" required autocomplete="current-password">
            </div>
            <button type="submit" class="btn btn-primary" style="width:100%;">Log ind</button>
            <p id="login-error" style="color:var(--accent);margin-top:12px;text-align:center;display:none;"></p>
        </form>
    </div>
</div>

<script>
document.getElementById('login-form').addEventListener('submit', async (e) => {
    e.preventDefault();
    const form = e.target;
    const data = { username: form.username.value, password: form.password.value };
    const errEl = document.getElementById('login-error');

    try {
        const res = await fetch('/api/login', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(data),
            redirect: 'manual',
        });
        if (res.ok) {
            window.location.href = '/';
        } else {
            const err = await res.json();
            errEl.textContent = err.detail || 'Login fejlede';
            errEl.style.display = 'block';
        }
    } catch(e) {
        errEl.textContent = 'Kunne ikke forbinde til serveren';
        errEl.style.display = 'block';
    }
});
</script>
{% endblock %}