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

{% block content %}
<section class="auth-section">
    <div class="auth-card">
        <h1>Log In</h1>
        <div id="loginError" class="alert alert-error" style="display:none;"></div>
        <form id="loginForm">
            <div class="form-group">
                <label for="email">Email</label>
                <input type="email" id="email" name="email" required class="form-control" placeholder="your@email.edu">
            </div>
            <div class="form-group">
                <label for="password">Password</label>
                <input type="password" id="password" name="password" required class="form-control" placeholder="Your password">
            </div>
            <button type="submit" class="btn btn-primary btn-block">Log In</button>
        </form>
        <p class="auth-alt">Don't have an account? <a href="/register">Join for Free</a></p>
    </div>
</section>
{% endblock %}

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