{% extends "base.html" %}
{% block title %}My Courses{% endblock %}
{% block nav_teacher_courses %}active{% endblock %}

{% block content %}
<div class="page-header">
    <div>
        <h2><i class="fa-solid fa-book-open me-2"></i>My Courses</h2>
        <p class="text-muted mb-0">Curriculum for your assigned programs</p>
    </div>
    <span class="badge bg-primary fs-6 py-2 px-3">{{ total_courses }} course{{ total_courses|pluralize }}</span>
</div>

<!-- Search bar -->
<form method="get" class="mb-4">
    <div class="input-group" style="max-width:380px;">
        <span class="input-group-text bg-white"><i class="fa-solid fa-magnifying-glass text-muted"></i></span>
        <input type="text" name="q" value="{{ search_query }}"
               class="form-control" placeholder="Search by name, code…"
               autocomplete="off">
        {% if search_query %}
        <a href="?" class="btn btn-outline-secondary" title="Clear search">
            <i class="fa-solid fa-xmark"></i>
        </a>
        {% else %}
        <button type="submit" class="btn btn-outline-primary">Search</button>
        {% endif %}
    </div>
</form>

{% if courses_by_program %}
<div class="accordion" id="teacherCoursesAccordion">
    {% for program, courses in courses_by_program.items %}
    <div class="accordion-item mb-3 border rounded overflow-hidden">
        <h2 class="accordion-header" id="tcProgHead{{ program.pk }}">
            <button class="accordion-button fw-bold{% if not search_query and not forloop.first %} collapsed{% endif %}"
                    type="button" data-bs-toggle="collapse" data-bs-target="#tcProg{{ program.pk }}"
                    aria-expanded="{% if search_query or forloop.first %}true{% else %}false{% endif %}"
                    aria-controls="tcProg{{ program.pk }}" style="color: var(--color-primary);">
                <i class="fa-solid fa-layer-group me-2"></i>{{ program.name }}
                <span class="text-muted fw-normal small ms-2">{{ program.get_level_display }}</span>
                <span class="text-muted fw-normal small ms-2">{{ courses|length }} course{{ courses|length|pluralize }}</span>
            </button>
        </h2>
        <div id="tcProg{{ program.pk }}"
             class="accordion-collapse collapse{% if search_query or forloop.first %} show{% endif %}"
             aria-labelledby="tcProgHead{{ program.pk }}" data-bs-parent="#teacherCoursesAccordion">
            <div class="accordion-body bg-light">
                <div class="accordion" id="tcYearAccordion{{ program.pk }}">
                    {% regroup courses by year as year_groups %}
                    {% for year_group in year_groups %}
                    <div class="accordion-item">
                        <h2 class="accordion-header" id="tcYearHead{{ program.pk }}_{{ year_group.grouper }}">
                            <button class="accordion-button{% if not forloop.first %} collapsed{% endif %}"
                                    type="button" data-bs-toggle="collapse"
                                    data-bs-target="#tcYear{{ program.pk }}_{{ year_group.grouper }}"
                                    aria-expanded="{% if forloop.first %}true{% else %}false{% endif %}"
                                    aria-controls="tcYear{{ program.pk }}_{{ year_group.grouper }}">
                                <i class="fa-solid fa-calendar-days me-2 text-muted"></i>
                                <span class="fw-semibold">
                                    {% if year_group.grouper == 1 %}Year 1
                                    {% elif year_group.grouper == 2 %}Year 2
                                    {% else %}Year 3
                                    {% endif %}
                                </span>
                                <span class="badge bg-secondary ms-2">{{ year_group.list|length }} subject{{ year_group.list|length|pluralize }}</span>
                            </button>
                        </h2>
                        <div id="tcYear{{ program.pk }}_{{ year_group.grouper }}"
                             class="accordion-collapse collapse{% if forloop.first %} show{% endif %}"
                             data-bs-parent="#tcYearAccordion{{ program.pk }}">
                            <div class="accordion-body p-0">
                                <ul class="list-group list-group-flush">
                                    {% for course in year_group.list %}
                                    <li class="list-group-item d-flex justify-content-between align-items-center">
                                        <div>
                                            <span class="fw-semibold">{{ course.name }}</span>
                                            {% if course.description %}
                                            <p class="text-muted small mb-0">{{ course.description|truncatechars:80 }}</p>
                                            {% endif %}
                                        </div>
                                        <div class="d-flex align-items-center gap-2 flex-shrink-0 ms-3">
                                            {% if course.code %}
                                            <span class="badge bg-light text-dark border font-monospace">{{ course.code }}</span>
                                            {% endif %}
                                            <a href="{% url 'content:course_content' course_pk=course.pk %}"
                                               class="btn btn-xs btn-outline-success" title="Manage Content">
                                                <i class="fa-solid fa-photo-film me-1"></i> Content
                                            </a>
                                        </div>
                                    </li>
                                    {% endfor %}
                                </ul>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
    {% endfor %}
</div>
{% else %}
<div class="portal-card">
    <div class="portal-card-body text-center py-5 text-muted">
        <i class="fa-solid fa-book-open fa-2x mb-3 d-block"></i>
        {% if search_query %}
        <p class="mb-2">No courses match <strong>"{{ search_query }}"</strong>.</p>
        <a href="?" class="btn btn-sm btn-outline-secondary">
            <i class="fa-solid fa-xmark me-1"></i> Clear Search
        </a>
        {% else %}
        <p class="mb-0">No courses found for your assigned programs.</p>
        <p class="small mt-1">Courses will appear here once they are added by the admin.</p>
        {% endif %}
    </div>
</div>
{% endif %}
{% endblock %}