{% extends "base.html" %}
{% block title %}Sign Up{% endblock %}

{% block auth_content %}
<style>
    .auth-logo {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.75rem;
        margin-bottom: 0.75rem;
        flex-wrap: wrap;
    }
    .auth-brand {
        font-size: 1.125rem;
        font-weight: 600;
        line-height: 1.3;
        max-width: 22rem;
        text-align: center;
    }
    .auth-logo-icon {
        width: 44px;
        height: 44px;
        background: linear-gradient(135deg, var(--accent-primary), var(--accent-success));
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .help-text {
        font-size: 0.75rem;
        color: var(--text-muted);
        margin-top: 0.25rem;
    }
    .errorlist {
        list-style: none;
        color: var(--accent-danger);
        font-size: 0.875rem;
        margin-top: 0.25rem;
    }
</style>

<div class="auth-container">
    <div class="auth-card">
        <div class="auth-header">
            <div class="auth-logo">
                <div class="auth-logo-icon">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M9 2.5v3.5M12 1.5v4.5M15 2.5v3.5"/>
                        <circle cx="9" cy="2.5" r="1" fill="white" stroke="none"/>
                        <circle cx="12" cy="1.5" r="1" fill="white" stroke="none"/>
                        <circle cx="15" cy="2.5" r="1" fill="white" stroke="none"/>
                        <rect x="5" y="6" width="14" height="13" rx="3"/>
                        <path d="M5 11H3.5M19 11h1.5"/>
                        <circle cx="9.5" cy="11.5" r="1.15"/>
                        <circle cx="14.5" cy="11.5" r="1.15"/>
                        <path d="M8 16h1.5l1-2 1.5 3.5L14.5 15l1 1H16.5"/>
                    </svg>
                </div>
                <span class="auth-brand">Extensive Exposure Guard</span>
            </div>
            <p class="auth-subtitle">Sign up to your AI security platform</p>
        </div>

        <form method="post">
            {% csrf_token %}
            
            <div class="form-group">
                <label for="id_username">Username</label>
                <input type="text" name="username" id="id_username" class="eeg-input" value="{{ form.username.value|default:'' }}" required>
                {{ form.username.errors }}
            </div>
            
            <div class="form-group">
                <label for="id_email">Email</label>
                <input type="email" name="email" id="id_email" class="eeg-input" value="{{ form.email.value|default:'' }}" required>
                {{ form.email.errors }}
            </div>
            
            <div class="form-group">
                <label for="id_organization_name">Organization Name</label>
                <input type="text" name="organization_name" id="id_organization_name" class="eeg-input" value="{{ form.organization_name.value|default:'' }}" required>
                <div class="help-text">Your company or project name. Add unlimited projects; gateway apps appear automatically.</div>
                {{ form.organization_name.errors }}
            </div>
            
            <div class="form-group">
                <label for="id_password1">Password</label>
                <input type="password" name="password1" id="id_password1" class="eeg-input" required>
                {{ form.password1.errors }}
            </div>
            
            <div class="form-group">
                <label for="id_password2">Confirm Password</label>
                <input type="password" name="password2" id="id_password2" class="eeg-input" required>
                {{ form.password2.errors }}
            </div>
            
            <button type="submit" class="btn btn-primary" style="width: 100%; justify-content: center;">
                Create Account
            </button>
        </form>

        <div class="auth-footer">
            <p>Already have an account? <a href="{% url 'accounts:login' %}">Sign in</a></p>
        </div>
    </div>
</div>
{% endblock %}