{% 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>
    <p class="text-center text-gray-600 mb-6">
        لطفاً آدرس ایمیل خود را که با آن ثبت‌نام کرده‌اید وارد کنید. ما یک لینک برای تنظیم مجدد رمز عبور برای شما ارسال خواهیم کرد.
    </p>
    <form method="post">
        {% csrf_token %}
        
        <!-- رندر کردن فیلد ایمیل به صورت دستی -->
        {% for field in form %}
            <div class="mb-4">
                <label for="{{ field.id_for_label }}" class="block text-gray-700 text-sm font-bold mb-2">
                    {{ 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"
                >
                {% 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>
    </form>
</div>
{% endblock %}