{% extends "base.html" %}

{% block content %}
<div class="max-w-md mx-auto bg-white/70 backdrop-blur-md rounded-lg shadow-xl p-8 mt-10">
    <h2 class="text-2xl font-bold text-gray-800 text-center mb-6">ساخت حساب کاربری جدید</h2>
    <form method="post">
        {% csrf_token %}
        
        <!-- با تغییر mb-4 به mb-2، فاصله بین فیلدها کمتر می‌شود -->
        {% for field in form %}
            <div class="mb-2">
                <label for="{{ field.id_for_label }}" class="block text-gray-700 text-sm font-bold mb-1">
                    {{ field.label }}
                </label>
                <input 
                    type="{{ field.field.widget.input_type }}" 
                    name="{{ field.name }}" 
                    id="{{ field.id_for_label }}" 
                    class="shadow-sm appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                >
                {% if field.help_text %}
                    <p class="text-gray-600 text-xs italic mt-1">{{ field.help_text|safe }}</p>
                {% endif %}
                {% for error in field.errors %}
                    <p class="text-red-500 text-xs italic mt-1">{{ error }}</p>
                {% endfor %}
            </div>
        {% endfor %}
        
        <button type="submit" class="w-full mt-6 bg-indigo-600 text-white font-semibold py-2 px-4 rounded-lg hover:bg-indigo-700 transition duration-300">
            ثبت‌نام
        </button>

        <p class="text-center mt-4 text-gray-600">
            از قبل حساب کاربری دارید؟ <a href="{% url 'login' %}" class="text-indigo-600 hover:underline">وارد شوید</a>
        </p>
    </form>
</div>
{% endblock %}