{% extends 'base.html' %}
{% load course_tags %}

{% block title %}دوره‌های آموزشی | آکادمی مهبد نتاج{% endblock %}

{% block content %}
<section style="padding: 4rem 6% 2rem; max-width: 1400px; margin: 0 auto;">
    <div style="text-align: center; margin-bottom: 3rem;">
        <h1 style="font-size: 3rem; font-weight: 800; margin-bottom: 1rem;">
            فهرست <span>دوره‌های آموزشی</span>
        </h1>
        <p style="color: var(--text-muted); font-size: 1.1rem; max-width: 650px; margin: 0 auto;">
            بر اساس موضوع جست‌وجو کنید و مسیر مناسب رشد خود را پیدا کنید.
        </p>
    </div>

    <!-- Search & Filter Controls -->
    <div style="background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 1.5rem; margin-bottom: 3rem; backdrop-filter: var(--glass-blur);">
        <form method="GET" action="{% url 'courses:catalog' %}" style="display: flex; gap: 1rem; flex-wrap: wrap;">
            <div style="flex-grow: 1; position: relative;">
                <i class="bi bi-search" style="position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--text-dim);"></i>
                <input type="text" name="q" value="{{ search_query }}" placeholder="جست‌وجوی دوره؛ مثلاً فروش، مدیریت یا هوش مصنوعی" class="form-control">
            </div>
            
            <select name="sort" class="form-control" style="width: auto; cursor: pointer;" onchange="this.form.submit()">
                <option value="featured" {% if sort_by == 'featured' %}selected{% endif %}>پیشنهادهای ویژه</option>
                <option value="price_low" {% if sort_by == 'price_low' %}selected{% endif %}>کمترین قیمت</option>
                <option value="price_high" {% if sort_by == 'price_high' %}selected{% endif %}>بیشترین قیمت</option>
                <option value="rating" {% if sort_by == 'rating' %}selected{% endif %}>بالاترین امتیاز</option>
            </select>
            
            {% if current_category %}
                <input type="hidden" name="category" value="{{ current_category }}">
            {% endif %}
            
            <button type="submit" class="btn-gold"><i class="bi bi-search"></i> جست‌وجو</button>
        </form>
    </div>

    <!-- Category Pills -->
    <div class="category-pills" style="margin-bottom: 3rem;">
        <a href="{% url 'courses:catalog' %}" class="cat-pill {% if not current_category %}active{% endif %}">
            همه موضوع‌ها
        </a>
        {% for cat in categories %}
            <a href="{% url 'courses:catalog' %}?category={{ cat.slug }}" class="cat-pill {% if current_category == cat.slug %}active{% endif %}">
                <i class="bi {{ cat.icon }}"></i> {{ cat.name }}
            </a>
        {% endfor %}
    </div>

    <!-- Course Grid -->
    <div class="course-grid" style="padding: 0 0 5rem;">
        {% for course in courses %}
            <div class="course-card">
                <div class="card-image-wrap">
                    <img src="{{ course.get_cover }}" alt="{{ course.name }}">
                    <div class="card-badges">{% if course.discount_percent %}<span class="discount-badge">{{ course.discount_percent|fa_number }}٪ تخفیف</span>{% endif %}{% if course.badge_text %}<span class="badge-gold">{{ course.badge_text }}</span>{% endif %}</div>
                    <span class="card-level-badge">{{ course.level }}</span>
                </div>
                
                <div class="card-body">
                    <div class="card-instructor">
                        <i class="bi bi-person-check-fill" style="color: var(--gold-primary);"></i>
                        <span>{{ course.instructor.name|default:"مهبد نتاج" }}</span>
                    </div>
                    
                    <h3 class="card-title">
                        <a href="{% url 'courses:course_detail' course.id %}">{{ course.name }}</a>
                    </h3>
                    
                    <p class="card-tagline">{{ course.tagline }}</p>
                    
                    <div class="card-meta">
                        <div class="card-meta-item">
                            <i class="bi bi-clock"></i> {{ course.duration }}
                        </div>
                        <div class="card-meta-item">
                            <i class="bi bi-star-fill" style="color: var(--gold-light);"></i> {{ course.rating }}
                        </div>
                        <div class="card-meta-item">
                            <i class="bi bi-people"></i> {{ course.enrolled_count }}
                        </div>
                    </div>
                    
                    <div class="card-footer">
                        <div class="price-box">
                            {% if course.is_free %}
                                <span class="price-free">رایگان</span>
                            {% else %}
                                {% if course.discount_price and course.discount_price < course.price %}
                                    <span class="price-original">{{ course.price|toman }}</span>
                                    <span class="price-current">{{ course.discount_price|toman }}</span>
                                {% else %}
                                    <span class="price-current">{{ course.price|toman }}</span>
                                {% endif %}
                            {% endif %}
                        </div>
                        
                        <a href="{% url 'courses:course_detail' course.id %}" class="btn-gold" style="padding: 0.5rem 1rem; font-size: 0.85rem;">
                            مشاهده دوره <i class="bi bi-arrow-left"></i>
                        </a>
                    </div>
                </div>
            </div>
        {% empty %}
            <div style="grid-column: 1 / -1; text-align: center; padding: 5rem 2rem; background: var(--bg-card); border-radius: var(--radius-md); border: 1px solid var(--border-subtle);">
                <i class="bi bi-search" style="font-size: 3.5rem; color: var(--gold-light);"></i>
                <h3 style="margin-top: 1rem; font-size: 1.5rem;">دوره‌ای با این مشخصات پیدا نشد</h3>
                <p style="color: var(--text-muted); margin-top: 0.5rem;">عبارت جست‌وجو یا فیلترها را تغییر دهید.</p>
                <a href="{% url 'courses:catalog' %}" class="btn-outline" style="margin-top: 1.5rem;">پاک‌کردن فیلترها</a>
            </div>
        {% endfor %}
    </div>
</section>
{% endblock %}