{% if tree %}
<div class="space-y-2">
  {% for chapter in tree %}
  <details class="group border border-gray-200 rounded-lg">
    <summary class="flex items-center justify-between px-4 py-3 cursor-pointer hover:bg-gray-50 select-none">
      <div class="flex items-center gap-3">
        <svg class="w-4 h-4 text-gray-400 transition-transform group-open:rotate-90" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
        </svg>
        <span class="font-medium text-sm">{{ chapter.chunk.title }}</span>
      </div>
      <div class="flex items-center gap-2 text-xs text-gray-400">
        {% if chapter.chunk.page_start is not none %}
        <span>pp. {{ chapter.chunk.page_start }}{% if chapter.chunk.page_end and chapter.chunk.page_end != chapter.chunk.page_start %}–{{ chapter.chunk.page_end }}{% endif %}</span>
        {% endif %}
        <span class="bg-gray-100 px-2 py-0.5 rounded">{{ chapter.sections|length }} sections</span>
      </div>
    </summary>

    <div class="border-t border-gray-100 px-4 pb-3">
      {% if chapter.chunk.chapter_summary %}
      <p class="text-xs text-gray-500 mt-2 mb-3 italic">{{ chapter.chunk.chapter_summary }}</p>
      {% endif %}

      {% if chapter.chunk.main_topics %}
      <div class="flex flex-wrap gap-1 mb-3">
        {% for topic in chapter.chunk.main_topics %}
        <span class="px-1.5 py-0.5 bg-blue-50 text-blue-600 text-xs rounded">{{ topic }}</span>
        {% endfor %}
      </div>
      {% endif %}

      {% for section in chapter.sections %}
      <details class="group/sec ml-4 border-l-2 border-gray-100 mb-2">
        <summary class="flex items-center justify-between pl-3 py-2 cursor-pointer hover:bg-gray-50 select-none text-sm">
          <div class="flex items-center gap-2">
            <svg class="w-3 h-3 text-gray-400 transition-transform group-open/sec:rotate-90" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
            </svg>
            <span class="text-gray-700">{{ section.chunk.title }}</span>
          </div>
          <div class="flex items-center gap-2 text-xs text-gray-400 pr-2">
            {% if section.chunk.page_start is not none %}
            <span>p. {{ section.chunk.page_start }}</span>
            {% endif %}
            <span class="bg-gray-100 px-1.5 py-0.5 rounded">{{ section.passages|length }}</span>
          </div>
        </summary>

        <div class="pl-6 pb-2">
          {% if section.chunk.section_summary %}
          <p class="text-xs text-gray-500 mt-1 mb-2 italic">{{ section.chunk.section_summary }}</p>
          {% endif %}

          {% for passage in section.passages %}
          <div class="border border-gray-100 rounded p-3 mb-2 text-xs">
            <div class="text-gray-700 whitespace-pre-line leading-relaxed mb-2">{{ passage.content[:300] }}{% if passage.content|length > 300 %}...{% endif %}</div>

            <div class="flex flex-wrap gap-1">
              {% if passage.summary %}
              <span class="px-1.5 py-0.5 bg-green-50 text-green-700 rounded" title="{{ passage.summary }}">summary</span>
              {% endif %}
              {% for concept in passage.concepts[:3] %}
              <span class="px-1.5 py-0.5 bg-purple-50 text-purple-600 rounded">{{ concept }}</span>
              {% endfor %}
              {% for kw in passage.keywords[:3] %}
              <span class="px-1.5 py-0.5 bg-yellow-50 text-yellow-700 rounded">{{ kw }}</span>
              {% endfor %}
              {% if passage.difficulty_level %}
              <span class="px-1.5 py-0.5 bg-gray-100 text-gray-600 rounded">{{ passage.difficulty_level }}</span>
              {% endif %}
            </div>
          </div>
          {% endfor %}
        </div>
      </details>
      {% endfor %}
    </div>
  </details>
  {% endfor %}
</div>
{% else %}
<p class="text-gray-400 text-sm">No chapters found in this document.</p>
{% endif %}