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

{% block title %}Sign Up | {{ project_name }}{% endblock %}

{% block content %}
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-md-6 col-lg-5">
            <div class="card bg-card border-0 rounded-4 p-4 p-md-5">
                <div class="text-center mb-4">
                    <h1 class="h3 fw-bold mb-2">Create Account</h1>
                    <p class="text-muted">Join the tracker to follow MPs and assets.</p>
                </div>
                
                <form method="post">
                    {% csrf_token %}
                    {% for field in form %}
                        <div class="mb-3">
                            <label class="form-label small text-muted">{{ field.label }}</label>
                            {{ field.errors }}
                            <input type="{{ field.field.widget.input_type|default:'text' }}" 
                                   name="{{ field.name }}" 
                                   class="form-control bg-dark border-0 text-white p-3 rounded-3" 
                                   id="{{ field.id_for_label }}"
                                   {% if field.value %}value="{{ field.value }}"{% endif %}>
                            {% if field.help_text %}
                                <div class="form-text small opacity-50">{{ field.help_text|safe }}</div>
                            {% endif %}
                        </div>
                    {% endfor %}
                    
                    <button type="submit" class="btn btn-primary-custom w-100 py-3 rounded-3 fw-bold mt-3">
                        Create Free Account
                    </button>
                </form>
                
                <div class="text-center mt-4">
                    <p class="small text-muted">Already have an account? <a href="{% url 'login' %}" class="text-accent-green text-decoration-none">Log in</a></p>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .bg-card {
        background-color: var(--card-bg) !important;
    }
    .text-accent-green {
        color: var(--accent-green);
    }
    .form-control:focus {
        background-color: #1e2126;
        box-shadow: 0 0 0 2px var(--accent-green);
        color: white;
    }
</style>
{% endblock %}