{% 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="password" name="password" required minlength="8" 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>
            <div>
                <label class="block text-xs font-mono text-slate-400 mb-2 uppercase tracking-widest">تأكيد كلمة المرور</label>
                <input type="password" name="confirm_password" required minlength="8" 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>
</div>
{% endblock %}