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

{% block title %}ثبت‌نام{% endblock %}

{% block content %}
<div class="card shadow-sm auth-card">
    <div class="card-body p-4">
        <h1 class="h4 mb-4 text-center">ثبت‌نام</h1>

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

            {% if form.non_field_errors %}
                <div class="alert alert-danger">
                    {{ form.non_field_errors }}
                </div>
            {% endif %}

            <div class="mb-3">
                <label class="form-label" for="{{ form.mobile.id_for_label }}">{{ form.mobile.label }}</label>
                {{ form.mobile }}
                {% for error in form.mobile.errors %}
                    <div class="text-danger small mt-1">{{ error }}</div>
                {% endfor %}
            </div>

            <div class="mb-3">
                <label class="form-label" for="{{ form.password1.id_for_label }}">{{ form.password1.label }}</label>
                {{ form.password1 }}
                {% for error in form.password1.errors %}
                    <div class="text-danger small mt-1">{{ error }}</div>
                {% endfor %}
            </div>

            <div class="mb-3">
                <label class="form-label" for="{{ form.password2.id_for_label }}">{{ form.password2.label }}</label>
                {{ form.password2 }}
                {% for error in form.password2.errors %}
                    <div class="text-danger small mt-1">{{ error }}</div>
                {% endfor %}
            </div>

            <button type="submit" class="btn btn-dark w-100">ایجاد حساب</button>
        </form>

        <div class="text-center mt-3">
            <a href="{% url 'accounts:login' %}">حساب داری؟ وارد شو</a>
        </div>
    </div>
</div>
{% endblock %}