{% extends 'base_public.html' %}

{% block content %}

<div class="row justify-content-center mt-5">

    <div class="col-md-4">

        <div class="card shadow-sm border-0 p-4">

            <h4 class="mb-4 text-center">Create Account</h4>

            <!-- Messages -->
            {% if messages %}
                {% for message in messages %}
                    <div class="alert alert-danger">
                        {{ message }}
                    </div>
                {% endfor %}
            {% endif %}

            <form method="post">
                {% csrf_token %}

                <input type="text" name="username" class="form-control mb-3"
                       placeholder="Username (no spaces)" required>

                <input type="email" name="email" class="form-control mb-3"
                       placeholder="Email" required>

                <input type="password" name="password1" class="form-control mb-3"
                       placeholder="Password" required>

                <input type="password" name="password2" class="form-control mb-3"
                       placeholder="Confirm Password" required>

                <button type="submit" class="btn btn-danger w-100">
                    Register
                </button>

            </form>

            <p class="text-center mt-3">
                Already have an account?
                <a href="{% url 'login' %}">Login</a>
            </p>

        </div>

    </div>

</div>

{% endblock %}