{% extends "base.html" %}

{% block title %}Join Warwick Connect{% endblock %}

{% block extra_css %}
<style>
    .auth-card {
        max-width: 450px;
        margin: 4rem auto;
        padding: 3rem;
        background: white;
        border-radius: 24px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    }
    
    .form-label {
        font-weight: 600;
        font-size: 0.9rem;
        margin-bottom: 0.5rem;
    }

    .form-control {
        border-radius: 12px;
        padding: 0.75rem 1rem;
        border: 1px solid #E2E8F0;
    }

    .form-control:focus {
        border-color: var(--warwick-navy);
        box-shadow: 0 0 0 4px rgba(0, 51, 102, 0.1);
    }

    .auth-title {
        font-weight: 800;
        font-size: 2rem;
        margin-bottom: 0.5rem;
        color: var(--warwick-navy);
    }

    .auth-subtitle {
        color: var(--text-muted);
        margin-bottom: 2.5rem;
    }

    .btn-submit {
        margin-top: 1.5rem;
        padding: 0.8rem;
    }
</style>
{% endblock %}

{% block content %}
<div class="auth-card">
    <h1 class="auth-title">Create Account</h1>
    <p class="auth-subtitle">Join the exclusive Warwick student network.</p>
    
    <form method="post" novalidate>
        {% csrf_token %}
        
        {% for field in form %}
            <div class="mb-3">
                <label for="{{ field.id_for_label }}" class="form-label">{{ field.label }}</label>
                {{ field }}
                {% if field.help_text %}
                    <div class="form-text">{{ field.help_text }}</div>
                {% endif %}
                {% if field.errors %}
                    <div class="text-danger small mt-1">
                        {{ field.errors.0 }}
                    </div>
                {% endif %}
            </div>
        {% endfor %}
        
        <button type="submit" class="btn btn-primary btn-submit w-100">Create Account</button>
    </form>
    
    <p class="mt-4 text-center text-muted small">
        Already have an account? <a href="{% url 'login' %}" class="text-decoration-none fw-bold">Log In</a>
    </p>
</div>
{% endblock %}