{% 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">
      Paper → Subject → Chapter → Lectures. Click a chapter to see its 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 paper in tree %}
<div class="card mb-4 shadow-sm">
  <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>
      <span class="badge bg-secondary ms-2">{{ paper.subjects|length }} subjects</span>
    </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">

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

      {% 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 id="subj-{{ paper.paper_key }}-{{ subject.code }}" class="collapse show">
          {% if not subject.chapters %}
            <div class="text-muted small fst-italic ms-4">No chapters yet.</div>
          {% endif %}
          <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>
      </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 %}