{% extends "base.html" %}
{% block title %}خطط الاشتراك{% endblock %}
{% block content %}
<div class="max-w-7xl mx-auto px-4 py-12">
    <div class="text-center mb-12">
        <h1 class="text-4xl font-extrabold luxury-text mb-4">خطط الاشتراك</h1>
        <p class="text-slate-400 text-lg">اختر الخطة المناسبة لاحتياجاتك</p>
    </div>

    <div class="grid md:grid-cols-3 gap-8">
        {% for plan in plans %}
        <div class="glass p-8 rounded-2xl {% if plan.name == 'pro' %}border-2 border-gold-500{% endif %}">
            <div class="text-center mb-6">
                <h2 class="text-2xl font-bold text-white mb-2">{{ plan.display_name or plan.name|title }}</h2>
                <div class="text-4xl font-black text-gold-400">
                    {{ plan.price }} <span class="text-lg text-slate-400">{{ plan.currency }}/شهر</span>
                </div>
            </div>
            <ul class="space-y-3 mb-8">
                <li class="flex items-center text-slate-300">
                    <svg class="w-5 h-5 text-emerald-400 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                    {{ plan.reports_per_month if plan.reports_per_month != -1 else '∞' }} تقارير شهرياً
                </li>
                {% if plan.name == 'pro' or plan.name == 'enterprise' %}
                <li class="flex items-center text-slate-300">
                    <svg class="w-5 h-5 text-emerald-400 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                    أدوات سريعة
                </li>
                <li class="flex items-center text-slate-300">
                    <svg class="w-5 h-5 text-emerald-400 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                    دورات احترافية
                </li>
                <li class="flex items-center text-slate-300">
                    <svg class="w-5 h-5 text-emerald-400 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                    التذاكر والدعم الفني
                </li>
                <li class="flex items-center text-slate-300">
                    <svg class="w-5 h-5 text-emerald-400 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                    السوق والمشاريع
                </li>
                <li class="flex items-center text-slate-300">
                    <svg class="w-5 h-5 text-emerald-400 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                    مجتمع المشاريع
                </li>
                <li class="flex items-center text-slate-300">
                    <svg class="w-5 h-5 text-emerald-400 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                    المنح
                </li>
                {% endif %}
            </ul>
            <a href="{{ url_for('dashboard.index') }}" class="block w-full text-center py-3 rounded-xl font-bold transition {% if plan.name == 'free' %}bg-slate-700 text-slate-300{% else %}bg-gold-500 text-black hover:bg-gold-400{% endif %}">
                {% if plan.name == 'free' %}الخطة الحالية{% else %}اشترك الآن{% endif %}
            </a>
        </div>
        {% endfor %}
    </div>
</div>
{% endblock %}