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

{% block title %}All Courses — {{ site_settings.institute_name }}{% endblock %}

{% block content %}
<section class="bg-primary text-white py-4">
    <div class="container">
        <h2 class="fw-bold mb-1">Browse Courses &amp; Certifications</h2>
        <p class="mb-0 text-white-75">Start Learning or take the certification exam directly</p>
    </div>
</section>

<section class="py-5">
    <div class="container">
        {% if categories %}
        <div class="d-flex flex-wrap gap-2 mb-4">
            <a href="{% url 'courses:course_list' %}" class="btn btn-sm {% if not selected_category %}btn-primary{% else %}btn-outline-secondary{% endif %} rounded-pill">All</a>
            {% for cat in categories %}
            <a href="?category={{ cat.slug }}" class="btn btn-sm {% if selected_category == cat.slug %}btn-primary{% else %}btn-outline-secondary{% endif %} rounded-pill">{{ cat.name }}</a>
            {% endfor %}
        </div>
        {% endif %}
        <div class="row g-4">
            {% for course in courses %}
            <div class="col-md-6 col-lg-4">
                <div class="card h-100 border-0 shadow-sm hover-lift rounded-4">
                    {% if course.thumbnail %}
                        <img src="{{ course.thumbnail.url }}" class="card-img-top rounded-top-4" alt="{{ course.title }}" style="height:180px;object-fit:cover;">
                    {% else %}
                        <div class="bg-primary bg-opacity-10 rounded-top-4 d-flex align-items-center justify-content-center" style="height:180px;">
                            <i class="bi bi-book-half text-primary" style="font-size:3rem;"></i>
                        </div>
                    {% endif %}
                    <div class="card-body p-4">
                        <div class="d-flex justify-content-between align-items-start mb-2 gap-2">
                            <div class="d-flex flex-wrap gap-1">
                                {% if course.category %}
                                <span class="badge bg-primary-subtle text-primary">{{ course.category.name }}</span>
                                {% endif %}
                                <span class="badge bg-secondary-subtle text-secondary text-capitalize">{{ course.level }}</span>
                                {% if course.is_featured %}
                                <span class="badge bg-warning text-dark">Featured</span>
                                {% endif %}
                                {% if course.requires_practical %}
                                <span class="badge bg-warning-subtle text-warning">Practical</span>
                                {% endif %}
                            </div>
                        </div>
                        <h5 class="card-title fw-bold mb-2">{{ course.title }}</h5>
                        <p class="card-text text-muted small mb-3">{{ course.short_description|truncatechars:90 }}</p>
                        <div class="small text-muted mb-2">
                            <div>
                              <i class="bi bi-mortarboard me-1"></i>Exam
                              {% if course.has_sale_price %}
                              <span class="text-decoration-line-through me-1">{{ course.currency }} {{ course.exam_fee }}</span>
                              <strong class="text-success">{{ course.currency }} {{ course.display_exam_price }}</strong>
                              {% else %}
                              {{ course.currency }} {{ course.display_exam_price }}
                              {% endif %}
                            </div>
                            {% if course.has_learning_content and course.learning_price %}
                            <div><i class="bi bi-journal-bookmark me-1"></i>Learning {{ course.currency }} {{ course.learning_price }}
                              {% if course.subscription_enabled and course.subscription_price_monthly %}
                              · or {{ course.currency }} {{ course.subscription_price_monthly }}/mo
                              {% endif %}
                            </div>
                            {% endif %}
                        </div>
                        <div class="d-flex align-items-center gap-3 text-muted small">
                            <span><i class="bi bi-clock me-1"></i>{{ course.duration_minutes }} min exam</span>
                            {% if course.duration_weeks %}
                            <span><i class="bi bi-calendar3 me-1"></i>~{{ course.duration_weeks }} weeks</span>
                            {% endif %}
                            <span><i class="bi bi-collection me-1"></i>{{ course.get_module_count }} modules</span>
                        </div>
                    </div>
                    <div class="card-footer bg-transparent border-top-0 pb-4 px-4">
                        <div class="d-grid gap-2">
                            {% if course.has_learning_content %}
                            <a href="{% url 'courses:learning_path' slug=course.slug %}" class="btn btn-primary">
                                <i class="bi bi-play-circle me-1"></i>Start Learning
                            </a>
                            {% endif %}
                            <a href="{% url 'courses:course_detail' slug=course.slug %}?path=direct"
                               class="btn {% if course.has_learning_content %}btn-outline-primary{% else %}btn-primary{% endif %}">
                                <i class="bi bi-award me-1"></i>Take Certification Exam Directly
                            </a>
                            <a href="{% url 'courses:course_detail' slug=course.slug %}" class="btn btn-link btn-sm text-muted">
                                View details
                            </a>
                            {% if course.enable_free_diagnostic %}
                            <a href="{% url 'courses:diagnostic_intro' slug=course.slug %}" class="btn btn-link btn-sm">
                                Free skill check
                            </a>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
            {% empty %}
            <div class="col-12">
                <div class="text-center py-5">
                    <i class="bi bi-collection text-muted" style="font-size:5rem;opacity:0.3;"></i>
                    <h5 class="text-muted mt-3">No courses available yet</h5>
                    <p class="text-muted small">Seed taxonomy after migrate: <code>python manage.py seed_course_taxonomy</code></p>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</section>
{% endblock %}