{% extends "base.html" %}
{% block title %}نسيت كلمة المرور{% endblock %}
{% block content %}
<div class="min-h-[80vh] flex items-center justify-center px-4 relative">
    <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-indigo-500/10 rounded-full blur-[100px] -z-10"></div>
    <div class="glass w-full max-w-md p-10 rounded-3xl border border-white/10 shadow-2xl">
        <div class="text-center mb-10">
            <h1 class="text-3xl font-serif font-bold text-white mb-2">استعادة كلمة المرور</h1>
            <p class="text-slate-400 text-sm">أدخل بريدك الإلكتروني وسنرسل لك رابط إعادة التعيين</p>
        </div>
        <form method="POST" class="space-y-6">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            <div>
                <label class="block text-xs font-mono text-slate-400 mb-2 uppercase tracking-widest">البريد الإلكتروني</label>
                <input type="email" name="email" required class="w-full bg-black/20 border border-white/10 rounded-xl px-4 py-3.5 text-white placeholder-slate-600 focus:outline-none focus:border-gold-500/50 focus:ring-1 focus:ring-gold-500/50 transition">
            </div>
            <button type="submit" class="w-full bg-gold-500 text-black py-4 rounded-xl font-bold hover:bg-gold-400 transition shadow-lg shadow-gold-500/20">
                إرسال رابط الاستعادة
            </button>
        </form>
        <div class="mt-8 text-center pt-6 border-t border-white/5">
            <a href="{{ url_for('auth.login') }}" class="text-sm text-slate-500 hover:text-gold-400 transition">العودة لتسجيل الدخول</a>
        </div>
    </div>
</div>
{% endblock %}