{% extends "base.html" %}
{% block title %}Join — {{ settings.APP_NAME }}{% endblock %}

{% block content %}
<section class="auth-section">
    <div class="auth-card">
        <h1>Join {{ settings.APP_NAME }}</h1>
        <p class="auth-subtitle">Join millions of researchers and get visibility for your work.</p>
        <div id="regError" class="alert alert-error" style="display:none;"></div>
        <form id="registerForm">
            <div class="form-group">
                <label for="full_name">Full Name</label>
                <input type="text" id="full_name" name="full_name" required class="form-control" placeholder="Dr. Jane Smith">
            </div>
            <div class="form-group">
                <label for="username">Username</label>
                <input type="text" id="username" name="username" required class="form-control" placeholder="janesmith">
            </div>
            <div class="form-group">
                <label for="email">Email</label>
                <input type="email" id="email" name="email" required class="form-control" placeholder="your@university.edu">
                <small class="form-hint">Use your university email to get a verified badge ✓</small>
            </div>
            <div class="form-group">
                <label for="password">Password</label>
                <input type="password" id="password" name="password" required minlength="8" class="form-control" placeholder="Min 8 characters">
            </div>
            <button type="submit" class="btn btn-primary btn-block">Join for Free</button>
        </form>
        <p class="auth-alt">Already have an account? <a href="/login">Log In</a></p>
    </div>
</section>
{% endblock %}

{% block extra_js %}
<script>
document.getElementById('registerForm').addEventListener('submit', async (e) => {
    e.preventDefault();
    const errEl = document.getElementById('regError');
    errEl.style.display = 'none';
    try {
        const res = await fetch('/api/auth/register', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({
                full_name: document.getElementById('full_name').value,
                username: document.getElementById('username').value,
                email: document.getElementById('email').value,
                password: document.getElementById('password').value,
            }),
        });
        if (!res.ok) {
            const data = await res.json();
            errEl.textContent = data.detail || 'Registration failed';
            errEl.style.display = 'block';
            return;
        }
        window.location.href = '/';
    } catch(err) {
        errEl.textContent = 'Network error';
        errEl.style.display = 'block';
    }
});
</script>
{% endblock %}