{{define "content"}}
<div class="card">
    <h1>Регистрация</h1>
    <form id="regForm">
        <label for="username">Никнейм</label>
        <input type="text" id="username" name="username" required minlength="3" maxlength="20" autocomplete="username">

        <label for="email">Email</label>
        <input type="email" id="email" name="email" required autocomplete="email">

        <label for="password">Пароль</label>
        <input type="password" id="password" name="password" required minlength="6" autocomplete="new-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="/login">Войти</a></p>
</div>

<script>
document.getElementById('regForm').addEventListener('submit', async (e) => {
    e.preventDefault();
    const form = new FormData(e.target);
    const res = await fetch('/api/web/register', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({
            username: form.get('username'),
            email: form.get('email'),
            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;
    }
    // Registration successful — go to login.
    window.location.href = '/login';
});
</script>
{{end}}