{% extends "base.html" %}
{% block content %}

<div class="d-flex justify-content-between align-items-center mb-4">
  <div>
    <h2 class="mb-1">📖 Syllabus Browser</h2>
    <p class="text-muted mb-0 small">
      Syllabus → Paper → Subject → Chapter → Lectures.
    </p>
  </div>
  <a href="{{ url_for('lectures') }}" class="btn btn-outline-secondary btn-sm">
    <i class="bi bi-list"></i> Full lecture list
  </a>
</div>

{% for syllabus in tree %}
<div class="card mb-4 shadow">
  <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center"
       data-bs-toggle="collapse" data-bs-target="#syl-{{ syllabus.syllabus_key }}"
       style="cursor: pointer;">
    <div>
      <i class="bi bi-collection-fill"></i>
      <strong>{{ syllabus.display_name }}</strong>
      {% if syllabus.level %}
        <span class="badge bg-light text-dark ms-2">Level {{ syllabus.level }}</span>
      {% endif %}
      <span class="badge bg-secondary ms-2">{{ syllabus.papers|length }} papers</span>
    </div>
    <div>
      <span class="badge bg-info text-dark">{{ syllabus.lecture_count }} lectures</span>
      <i class="bi bi-chevron-down ms-2"></i>
    </div>
  </div>

  <div id="syl-{{ syllabus.syllabus_key }}" class="collapse show">
    <div class="card-body p-3">

      {% if not syllabus.papers %}
        <div class="text-muted small fst-italic">No papers configured.</div>
      {% endif %}

      {% for paper in syllabus.papers %}
      <div class="card mb-3 border-0">
        <div class="card-header bg-dark text-white d-flex justify-content-between align-items-center"
             data-bs-toggle="collapse" data-bs-target="#paper-{{ paper.paper_key }}"
             style="cursor: pointer;">
          <div>
            <i class="bi bi-journal-bookmark-fill"></i>
            <a href="{{ url_for('lectures', paper=paper.paper_key) }}"
               class="text-white text-decoration-none">
              <strong>{{ paper.display_name }}</strong>
              <i class="bi bi-box-arrow-up-right small"></i>
            </a>
          </div>
          <div>
            <span class="badge bg-info text-dark">{{ paper.lecture_count }} lectures</span>
            <i class="bi bi-chevron-down ms-2"></i>
          </div>
        </div>

        <div id="paper-{{ paper.paper_key }}" class="collapse show">
          <div class="card-body p-3">

            {% for subject in paper.subjects %}
            <div class="mb-3 border-start border-3 border-primary ps-3">
              <div class="d-flex justify-content-between align-items-center mb-2">
                <div>
                  <span class="badge bg-primary me-2">{{ subject.code }}</span>
                  <a href="{{ url_for('lectures', paper=paper.paper_key, syllabus=subject.code) }}"
                     class="text-decoration-none text-dark">
                    <strong>{{ subject.name }}</strong>
                    <i class="bi bi-box-arrow-up-right small text-muted"></i>
                  </a>
                </div>
                <div>
                  <span class="badge bg-light text-dark">{{ subject.chapters|length }} chapters</span>
                  <span class="badge bg-info text-dark">{{ subject.lecture_count }} lectures</span>
                </div>
              </div>

              <div class="row g-2 ms-1">
                {% for chapter in subject.chapters %}
                <div class="col-md-6 col-lg-4">
                  <a href="{{ url_for('lectures', paper=paper.paper_key, syllabus=subject.code ~ '.' ~ chapter.code) }}"
                     class="text-decoration-none">
                    <div class="card h-100 border-0 bg-light">
                      <div class="card-body p-2">
                        <div class="d-flex justify-content-between align-items-start">
                          <div class="small text-muted mb-1">
                            <code>{{ subject.code }}.{{ chapter.code }}</code>
                          </div>
                          <div>
                            {% if chapter.lecture_count > 0 %}
                              <span class="badge bg-success" title="Lectures">📼 {{ chapter.lecture_count }}</span>
                            {% else %}
                              <span class="badge bg-light text-muted" title="Lectures">📼 0</span>
                            {% endif %}
                            {% if chapter.question_count > 0 %}
                              <span class="badge bg-primary" title="Questions">📚 {{ chapter.question_count }}</span>
                            {% else %}
                              <span class="badge bg-light text-muted" title="Questions">📚 0</span>
                            {% endif %}
                          </div>
                        </div>
                        <div class="fw-semibold small">{{ chapter.name }}</div>
                        {% if chapter.description %}
                          <div class="text-muted"
                               style="font-size: 0.72rem; line-height: 1.2;">
                            {{ chapter.description[:90] }}{% if chapter.description|length > 90 %}…{% endif %}
                          </div>
                        {% endif %}
                      </div>
                    </div>
                  </a>
                </div>
                {% endfor %}
              </div>
            </div>
            {% endfor %}

          </div>
        </div>
      </div>
      {% endfor %}

    </div>
  </div>
</div>
{% else %}
<div class="alert alert-info">
  <i class="bi bi-info-circle"></i>
  No syllabus configured yet. Run <code>📚 Syllabus Setup</code> in the CLI, then import a JSON seed file.
</div>
{% endfor %}

<style>
  .card-header:hover { background-color: #1a1a1a !important; }
  code { color: #6c757d; }
</style>

{% endblock %}