{% extends "base.html" %}
{% block title %}Login — Vela Platform{% endblock %}
{% block content %}
<div class="row justify-content-center mt-5">
    <div class="col-md-5 col-lg-4">
        <div class="card shadow">
            <div class="card-body p-4">
                <h3 class="card-title text-center mb-4">🔐 Sign In</h3>
                <form id="loginForm">
                    <div class="mb-3">
                        <label for="username" class="form-label">Username</label>
                        <input type="text" class="form-control" id="username" name="username"
                               placeholder="Enter username" required autofocus>
                    </div>
                    <div class="mb-3">
                        <label for="password" class="form-label">Password</label>
                        <input type="password" class="form-control" id="password" name="password"
                               placeholder="Enter password" required>
                    </div>
                    <div id="loginError" class="alert alert-danger d-none py-2"></div>
                    <button type="submit" class="btn btn-primary w-100">Sign In</button>
                </form>
                <p class="text-muted text-center mt-3 mb-0" style="font-size: 0.85rem;">
                    Demo: admin / admin123 &nbsp;|&nbsp; viewer / viewer123
                </p>
            </div>
        </div>
    </div>
</div>
{% endblock %}
{% block scripts %}
<script>
document.getElementById('loginForm').addEventListener('submit', async (e) => {
    e.preventDefault();
    const form = e.target;
    const errorEl = document.getElementById('loginError');
    errorEl.classList.add('d-none');

    const formData = new FormData(form);
    try {
        const resp = await fetch('/api/auth/login', {
            method: 'POST',
            body: formData,
        });
        if (!resp.ok) {
            const data = await resp.json();
            errorEl.textContent = data.detail || 'Login failed';
            errorEl.classList.remove('d-none');
            return;
        }
        const data = await resp.json();
        setToken(data.token);
        window.location.href = '/';
    } catch (err) {
        errorEl.textContent = 'Network error. Please try again.';
        errorEl.classList.remove('d-none');
    }
});
</script>
{% endblock %}