{% extends "base.html" %}
{% block title %}Password Reset Request{% endblock %}
{% block content %}
<div class="min-h-screen bg-gradient-to-br from-blue-900 via-purple-900 to-teal-900 py-20">
    <div class="max-w-md mx-auto">
        <div class="bg-white rounded-2xl shadow-xl overflow-hidden">
            <div class="bg-gradient-to-r from-orange-600 to-red-600 p-8 text-white text-center">
                <i class="fas fa-key text-4xl mb-4"></i>
                <h2 class="text-2xl font-bold">Password Reset Request</h2>
                <p class="text-orange-100 mt-2">We'll help you get back into your account</p>
            </div>
            
            <div class="p-8">
                <div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6">
                    <div class="flex items-start">
                        <i class="fas fa-info-circle text-blue-500 mr-3 mt-1"></i>
                        <div class="text-sm text-blue-700">
                            <p class="font-semibold mb-1">How it works:</p>
                            <p>Enter your email address and we'll send a password reset request to our administrators. They will contact you directly to help reset your password securely.</p>
                        </div>
                    </div>
                </div>
                
                <form method="POST" class="space-y-6">
                    {{ form.hidden_tag() }}
                    <div>
                        {{ form.email.label(class="block text-sm font-semibold text-gray-700 mb-2") }}
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <i class="fas fa-envelope text-gray-400"></i>
                            </div>
                            {{ form.email(class="w-full pl-10 pr-3 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent transition-all duration-200", placeholder="Enter your email address") }}
                        </div>
                        {% if form.email.errors %}
                            <div class="text-red-500 text-sm mt-2">
                                {% for error in form.email.errors %}
                                    <p><i class="fas fa-exclamation-circle mr-1"></i>{{ error }}</p>
                                {% endfor %}
                            </div>
                        {% endif %}
                    </div>
                    
                    {{ form.submit(class="w-full bg-gradient-to-r from-orange-600 to-red-600 text-white py-3 px-6 rounded-lg hover:from-orange-700 hover:to-red-700 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 transition-all duration-200 font-semibold text-lg") }}
                </form>
                
                <div class="mt-8 pt-6 border-t border-gray-200 text-center">
                    <p class="text-sm text-gray-600 mb-4">Remember your password?</p>
                    <a href="{{ url_for('auth.login') }}" 
                       class="inline-flex items-center text-blue-600 hover:text-blue-700 font-medium transition-colors duration-200">
                        <i class="fas fa-arrow-left mr-2"></i>Back to Login
                    </a>
                </div>
                
                <div class="mt-6 bg-green-50 border border-green-200 rounded-lg p-4">
                    <div class="flex items-start">
                        <i class="fas fa-shield-alt text-green-500 mr-3 mt-1"></i>
                        <div class="text-sm text-green-700">
                            <p class="font-semibold mb-1">Security Note:</p>
                            <p>Our administrators will verify your identity before resetting your password to keep your account secure.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}