{% extends 'base.html' %}

{% load static %}
{% block extra_head %}
<link rel="stylesheet" href="{% static 'css/styles.css' %}">
{% endblock %}

{% block content %}
<div class="container d-flex justify-content-center align-items-center min-vh-100">
    <div class="auth-form card shadow-sm p-4">
        <h2 class="card-title text-center mb-4">Sign Up</h2>
        <form method="post">
            {% csrf_token %}
            <div class="mb-3">
                {{ form.username.label_tag }}
                <input type="text" name="{{ form.username.name }}" id="{{ form.username.id_for_label }}" class="form-control" value="{{ form.username.value }}">
            </div>
            <div class="mb-3">
                {{ form.email.label_tag }}
                <input type="email" name="{{ form.email.name }}" id="{{ form.email.id_for_label }}" class="form-control" value="{{ form.email.value }}">
            </div>
            <div class="mb-3">
                {{ form.password1.label_tag }}
                <input type="password" name="{{ form.password1.name }}" id="{{ form.password1.id_for_label }}" class="form-control" value="{{ form.password1.value }}">
            </div>
            <div class="mb-3">
                {{ form.password2.label_tag }}
                <input type="password" name="{{ form.password2.name }}" id="{{ form.password2.id_for_label }}" class="form-control" value="{{ form.password2.value }}">
            </div>
            {% if form.errors %}
                <div class="form-errors alert alert-danger">
                    {% for field in form %}
                        {% for error in field.errors %}
                            <p>{{ error }}</p>
                        {% endfor %}
                    {% endfor %}
                    {% for error in form.non_field_errors %}
                        <p>{{ error }}</p>
                    {% endfor %}
                </div>
            {% endif %}
            <button type="submit" class="btn btn-primary w-100">Sign Up</button>
        </form>
        <p class="text-center mt-3">Already have an account? <a href="{% url 'login' %}">Log in here</a>.</p>
    </div>
</div>
{% endblock %}