{% extends "base.html" %}

{% block content %}
<div class="max-w-3xl mx-auto">
    
    <div class="flex items-center gap-6 mb-8">
        <div class="w-24 h-24 bg-gradient-to-tr from-blue-500 to-cyan-400 rounded-full flex items-center justify-center shadow-lg">
            <span class="text-4xl text-white font-bold">U</span>
        </div>
        <div>
            <h2 class="text-2xl font-bold text-slate-800">{{ session.get('first_name', 'کاربر') }}</h2>
            <p class="text-slate-500">نام کاربری: {{ current_user.username }}</p>
            <span class="inline-block mt-2 px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-xs font-bold">مدیر سیستم</span>
        </div>
    </div>

    <div class="win-card mb-6">
        <h3 class="font-bold text-lg mb-4 border-b pb-2">تغییر رمز عبور</h3>
        <form class="space-y-4 max-w-md">
            <div>
                <label class="form-label">رمز عبور فعلی</label>
                <input type="password" class="form-input" dir="ltr">
            </div>
            <div>
                <label class="form-label">رمز عبور جدید</label>
                <input type="password" class="form-input" dir="ltr">
            </div>
            <div>
                <label class="form-label">تکرار رمز عبور جدید</label>
                <input type="password" class="form-input" dir="ltr">
            </div>
            <div class="pt-2">
                <button class="btn-primary">ذخیره تغییرات</button>
            </div>
        </form>
    </div>
</div>
{% endblock %}