{% extends "base.html" %}
{% block title %}قوالب المشاريع{% endblock %}
{% block content %}
<div class="max-w-7xl mx-auto px-4 py-12">
    <div class="flex items-center justify-between mb-8">
        <h1 class="text-3xl font-serif font-bold text-white flex items-center gap-3">
            <span class="text-gold-400">&#128203;</span> قوالب المشاريع الجاهزة
        </h1>
        <a href="{{ url_for('study.new') }}" class="text-slate-400 hover:text-white text-sm">أو ابدأ من الصفر &#8592;</a>
    </div>

    <p class="text-slate-400 mb-8">اختر قالباً جاهزاً لبدء دراسة الجدوى بسرعة. كل قالب يحتوي على وصف مبدئي مخصص للقطاع.</p>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        {% for tpl in templates %}
        <a href="{{ url_for('templates.use_template', tpl_id=tpl.id) }}" class="glass p-6 rounded-xl glass-hover transition group">
            <div class="text-3xl mb-3">{{ tpl.icon }}</div>
            <div class="text-white font-semibold mb-1 group-hover:text-gold-400 transition">{{ tpl.name_ar }}</div>
            <div class="text-xs text-slate-500 mb-2">{{ tpl.name }}</div>
            <p class="text-sm text-slate-400">{{ tpl.description_ar }}</p>
            <div class="flex items-center justify-between mt-3">
                <span class="text-xs text-slate-600">{{ tpl.sector }}</span>
                <span class="text-xs text-slate-600">{{ tpl.usage_count }} استخدام</span>
            </div>
        </a>
        {% endfor %}
    </div>
</div>
{% endblock %}