{% for src in sources %}
{% set source_url = src.source_uri | public_source_url %}
<div class="source-doc" data-ref="{{ src.id }}">
  <div class="source-doc-header">
    <button class="source-doc-toggle" type="button" data-action="toggle-doc" aria-expanded="false">
      <span class="collapse-icon">▶</span>
      <span class="source-doc-title">{{ src.title or "Source" }}</span>
      <span class="source-doc-badge">{{ src.id | reference_label }}</span>
      <span class="source-doc-count">{{ src.chunks|length }}</span>
    </button>
    {% if src.download_url %}
    <a href="{{ src.download_url }}"
      class="source-action-icon"
       title="Download source"
       aria-label="Download source"
       download>
      <svg class="source-action-icon-svg" viewBox="0 0 24 24" fill="none"
           stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
        <polyline points="7 10 12 15 17 10"/>
        <line x1="12" y1="15" x2="12" y2="3"/>
      </svg>
    </a>
    {% endif %}
    {% if source_url %}
    <a href="{{ source_url }}"
      class="source-action-icon"
       title="Open source"
       aria-label="Open source"
      target="_blank">
      <svg class="source-action-icon-svg" viewBox="0 0 24 24" fill="none"
           stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
        <path d="M14 3h7v7"/>
        <path d="M10 14L21 3"/>
        <path d="M21 14v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5"/>
      </svg>
    </a>
    {% endif %}
  </div>
  <div class="source-doc-chunks">
    {% for chunk in src.chunks %}
    <div class="source-chunk" data-ref="{{ src.id }}" data-chunk="{{ chunk.chunk_idx }}">
      <div class="source-chunk-header">
        <span class="source-chunk-page">
          {% if chunk.page_number is not none %}p.{{ chunk.page_number }}{% else %}#{{ chunk.chunk_idx }}{% endif %}
        </span>
      </div>
      {% if chunk.thumbnail_url or chunk.image_url %}
      <div class="source-chunk-image">
        <img src="{{ chunk.thumbnail_url or chunk.image_url }}"
             data-full-src="{{ chunk.image_url or chunk.thumbnail_url }}"
             alt="Page {{ chunk.page_number or '' }}" loading="lazy"
             data-action="open-lightbox"
             role="button" tabindex="0" aria-label="Open page image">
      </div>
      {% endif %}
      {% if chunk.content %}
      <div class="source-chunk-content">
        {{ chunk.content | highlight_content(chunk.highlight_phrases) }}
      </div>
      {% endif %}
    </div>
    {% endfor %}
  </div>
</div>
{% endfor %}