{% extends 'base/layout.html' %}

{% block content %}
<div
    style="max-width: 400px; margin: 4rem auto; background: var(--card-bg); padding: 2rem; border-radius: 0.5rem; border: 1px solid var(--border-color);">
    <h2 style="margin-top: 0;">Create Account</h2>
    <form method="post">
        {% csrf_token %}
        {{ form.as_p }}
        <button type="submit" class="btn" style="width: 100%;">Register</button>
    </form>
    <p style="margin-top: 1rem; text-align: center;">
        Already have an account? <a href="{% url 'login' %}" style="color: var(--primary-color);">Login here</a>.
    </p>
</div>
{% endblock %}