{% extends 'base.html' %}
{% load static %}

{% block title %}Register - NetCop AI Agent{% endblock %}

{% block content %}
<div class="card" style="max-width: 400px; margin: 2rem auto;">
    <div class="card-header">
        <h2 class="card-title">Create Account</h2>
        <p style="color: var(--gray-600); margin: 0;">Join NetCop AI Agent and start automating your workflows.</p>
    </div>
    
    <form id="registerForm" class="form">
        {% csrf_token %}
        <div class="form-group">
            <label for="email" class="form-label">Email</label>
            <input 
                type="email" 
                id="email" 
                name="email" 
                class="form-input" 
                required
                placeholder="your@email.com"
            >
        </div>
        
        <div class="form-group">
            <label for="password" class="form-label">Password</label>
            <input 
                type="password" 
                id="password" 
                name="password" 
                class="form-input" 
                required
                minlength="8"
                placeholder="At least 8 characters"
            >
        </div>
        
        <div class="form-group">
            <label for="password_confirm" class="form-label">Confirm Password</label>
            <input 
                type="password" 
                id="password_confirm" 
                name="password_confirm" 
                class="form-input" 
                required
                placeholder="Re-enter your password"
            >
        </div>
        
        <button type="submit" class="btn btn-primary btn-full">
            Create Account
        </button>
    </form>
    
    <div style="text-align: center; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--gray-200);">
        <p style="color: var(--gray-600); margin-bottom: 0.5rem;">Already have an account?</p>
        <a href="/login/" class="btn btn-secondary">Sign In</a>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', () => {
    handleFormSubmit('#registerForm', async (data) => {
        if (data.password !== data.password_confirm) {
            throw new Error('Passwords do not match');
        }
        
        const result = await register(data.email, data.password, data.password_confirm);
        showMessage('Account created successfully! Redirecting...', 'success');
        setTimeout(() => {
            window.location.href = '/dashboard/';
        }, 1000);
    });
});
</script>
{% endblock %}