{% extends 'main/base.html' %}
{% block title %}{{ course_type_display|default:"All Courses" }} - Monaco Institute{% endblock %}

{% block content %}
<section class="page-banner">
    <div class="container">
        <h1>{{ course_type_display|default:"All Courses" }}</h1>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb breadcrumb-custom">
                <li class="breadcrumb-item"><a href="{% url 'home' %}">Home</a></li>
                <li class="breadcrumb-item active">{{ course_type_display|default:"Courses" }}</li>
            </ol>
        </nav>
    </div>
</section>

<section class="py-3 bg-light">
    <div class="container">
        <div class="d-flex flex-wrap gap-2 py-2">
            <a href="{% url 'courses' %}" class="btn btn-sm {% if not course_type %}btn-primary{% else %}btn-outline-primary{% endif %}">All Courses</a>
            <a href="{% url 'courses_by_type' 'degree' %}" class="btn btn-sm {% if course_type == 'degree' %}btn-primary{% else %}btn-outline-primary{% endif %}">Children ICT</a>
            <a href="{% url 'courses_by_type' 'diploma' %}" class="btn btn-sm {% if course_type == 'diploma' %}btn-primary{% else %}btn-outline-primary{% endif %}">Diploma</a>
            <a href="{% url 'courses_by_type' 'certificate' %}" class="btn btn-sm {% if course_type == 'certificate' %}btn-primary{% else %}btn-outline-primary{% endif %}">Certificate</a>
            <a href="{% url 'courses_by_type' 'short' %}" class="btn btn-sm {% if course_type == 'short' %}btn-primary{% else %}btn-outline-primary{% endif %}">Short Courses</a>
            <a href="{% url 'courses_by_type' 'vocational' %}" class="btn btn-sm {% if course_type == 'vocational' %}btn-primary{% else %}btn-outline-primary{% endif %}">Vocational</a>
        </div>
    </div>
</section>

<section class="py-5">
    <div class="container">
        <div class="row">
            {% for course in courses %}
            <div class="col-lg-4 col-md-6 mb-4" data-aos="fade-up" data-aos-delay="{{ forloop.counter0|add:1 }}00">
                <div class="course-card h-100">
                    {% if course.image %}
                    <img src="{{ course.image.url }}" alt="{{ course.title }}" class="img-fluid rounded mb-3" style="width:100%;height:160px;object-fit:cover;">
                    {% endif %}
                    <div class="course-card-icon">
                        {% if course.course_type == 'degree' %}<i class="fas fa-university"></i>
                        {% elif course.course_type == 'diploma' %}<i class="fas fa-scroll"></i>
                        {% elif course.course_type == 'certificate' %}<i class="fas fa-certificate"></i>
                        {% elif course.course_type == 'short' %}<i class="fas fa-clock"></i>
                        {% else %}<i class="fas fa-tools"></i>{% endif %}
                    </div>
                    <span class="badge mb-2" style="background: var(--accent);">{{ course.get_course_type_display }}</span>
                    <h5>{{ course.title }}</h5>
                    <p>{{ course.description|truncatewords:25 }}</p>
                    <div class="course-meta mb-3">
                        <span><i class="fas fa-clock me-1"></i>{{ course.duration }}</span>
                        {% if course.fees %}<span class="ms-3"><i class="fas fa-tag me-1"></i>${{ course.fees }}</span>{% endif %}
                    </div>
                    <div class="mt-auto">
                        <a href="{% url 'course_detail' course.pk %}" class="btn btn-primary-custom btn-sm me-2">Learn More</a>
                        <a href="{% url 'admissions' %}" class="btn btn-outline-primary btn-sm">Apply Now</a>
                    </div>
                </div>
            </div>
            {% empty %}
            <div class="col-12 text-center py-5">
                <i class="fas fa-book-open fa-4x text-muted mb-3"></i>
                <h4 class="text-muted">No courses available in this category yet.</h4>
                <a href="{% url 'admissions' %}" class="btn btn-primary-custom mt-3">Contact Us for More Info</a>
            </div>
            {% endfor %}
        </div>
    </div>
</section>
{% endblock %}