{% extends "base.html" %}

{% block title %}پنل کاربری - {{ settings.site_name }}{% endblock %}

{% block content %}

<section style="padding:40px 0;">
    <div class="container">
        <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;flex-wrap:wrap;gap:15px;">
            <h1 style="font-size:28px;color:#0d1b6b;">👤 پنل کاربری</h1>
            <div style="display:flex;gap:10px;flex-wrap:wrap;">
                <a href="{{ url_for('user_wallet') }}" style="background:#0d1b6b;color:white;padding:10px 25px;border-radius:30px;">
                    <i class="fas fa-wallet"></i> کیف پول
                </a>
                <a href="{{ url_for('logout') }}" style="background:#e53935;color:white;padding:10px 25px;border-radius:30px;">
                    <i class="fas fa-sign-out-alt"></i> خروج
                </a>
            </div>
        </div>
        
        <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-bottom:30px;">
            <div style="background:white;padding:25px;border-radius:15px;box-shadow:0 5px 20px rgba(0,0,0,0.06);text-align:center;">
                <i class="fas fa-user" style="font-size:36px;color:#0d1b6b;"></i>
                <h3 style="margin:10px 0 5px;">{{ user.fullname }}</h3>
                <p style="color:#888;font-size:14px;">{{ user.phone }}</p>
            </div>
            <div style="background:white;padding:25px;border-radius:15px;box-shadow:0 5px 20px rgba(0,0,0,0.06);text-align:center;">
                <i class="fas fa-wallet" style="font-size:36px;color:#25d366;"></i>
                <h3 style="margin:10px 0 5px;">{{ user.wallet|default(0)|persian_numbers }} تومان</h3>
                <p style="color:#888;font-size:14px;">موجودی کیف پول</p>
                <a href="{{ url_for('user_wallet') }}" style="display:inline-block;margin-top:10px;background:#0d1b6b;color:white;padding:5px 20px;border-radius:20px;font-size:13px;">شارژ کیف پول</a>
            </div>
        </div>
        
        <div style="background:white;padding:30px;border-radius:15px;box-shadow:0 5px 20px rgba(0,0,0,0.06);">
            <h3 style="color:#0d1b6b;margin-bottom:15px;">خدمات ما</h3>
            <p style="color:#666;">برای دریافت خدمات تعمیرات دوو با ما تماس بگیرید.</p>
            <a href="tel:{{ settings.phone1 }}" style="display:inline-block;margin-top:15px;background:#e53935;color:white;padding:12px 35px;border-radius:30px;font-weight:700;">
                <i class="fas fa-phone-alt"></i> {{ settings.phone1 }}
            </a>
        </div>
    </div>
</section>

{% endblock %}