{{define "content"}}
<div class="card">
    <h1>Вход</h1>
    <form id="loginForm">
        <label for="username">Логин или Email</label>
        <input type="text" id="username" name="username" required autocomplete="username">

        <label for="password">Пароль</label>
        <input type="password" id="password" name="password" required autocomplete="current-password">

        <button type="submit" class="btn">Войти</button>
    </form>
    <p id="error" style="color: var(--error); margin-top: 0.75rem; display: none;"></p>
    <p style="margin-top: 1rem;">Нет аккаунта? <a href="/register">Зарегистрироваться</a></p>
</div>

<script>
document.getElementById('loginForm').addEventListener('submit', async (e) => {
    e.preventDefault();
    const form = new FormData(e.target);
    const res = await fetch('/api/web/login', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({
            username: form.get('username'),
            password: form.get('password')
        })
    });
    const data = await res.json();
    if (!res.ok) {
        document.getElementById('error').textContent = data.error || 'Ошибка входа';
        document.getElementById('error').style.display = 'block';
        return;
    }
    // Save token to localStorage and redirect.
    localStorage.setItem('token', data.token);
    localStorage.setItem('uuid', data.uuid);
    localStorage.setItem('username', data.username);
    window.location.href = '/';
});
</script>
{{end}}