{% extends "base.html" %}

{% block title %}Register - ZeroGate{% endblock %}

{% block content %}
<div class="auth-container">
    <div class="auth-card">
        <h2>🚀 Create Account</h2>
        
        <div id="error-alert" class="alert alert-error" style="display: none;"></div>
        <div id="success-alert" class="alert alert-success" style="display: none;"></div>
        
        <form id="register-form">
            <div class="form-group">
                <label for="username">Username</label>
                <input type="text" id="username" name="username" class="form-control" required minlength="3">
            </div>
            
            <div class="form-group">
                <label for="email">Email</label>
                <input type="email" id="email" name="email" class="form-control" required>
            </div>
            
            <div class="form-group">
                <label for="password">Password</label>
                <input type="password" id="password" name="password" class="form-control" required minlength="8">
            </div>
            
            <div class="form-group">
                <label for="confirm-password">Confirm Password</label>
                <input type="password" id="confirm-password" name="confirm-password" class="form-control" required>
            </div>
            
            <button type="submit" class="btn btn-primary">Create Account</button>
        </form>
        
        <div class="auth-footer">
            Already have an account? <a href="/login">Login</a>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
document.getElementById('register-form').addEventListener('submit', async (e) => {
    e.preventDefault();
    
    const username = document.getElementById('username').value;
    const email = document.getElementById('email').value;
    const password = document.getElementById('password').value;
    const confirmPassword = document.getElementById('confirm-password').value;
    const errorAlert = document.getElementById('error-alert');
    const successAlert = document.getElementById('success-alert');
    
    errorAlert.style.display = 'none';
    successAlert.style.display = 'none';
    
    if (password !== confirmPassword) {
        errorAlert.textContent = 'Passwords do not match';
        errorAlert.style.display = 'block';
        return;
    }
    
    try {
        const response = await fetch('/auth/register', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ username, email, password })
        });
        
        const data = await response.json();
        
        if (response.ok) {
            successAlert.textContent = 'Account created! Redirecting to login...';
            successAlert.style.display = 'block';
            setTimeout(() => window.location.href = '/login', 2000);
        } else {
            errorAlert.textContent = data.detail || 'Registration failed';
            errorAlert.style.display = 'block';
        }
    } catch (error) {
        errorAlert.textContent = 'Connection error';
        errorAlert.style.display = 'block';
    }
});
</script>
{% endblock %}