{% if results %}
<div class="space-y-3">
  {% for r in results %}
  <div class="border border-gray-200 rounded-lg p-4">
    <div class="flex items-center justify-between mb-2">
      <div class="flex items-center gap-2">
        <span class="text-sm font-medium text-gray-700">Score: {{ "%.4f"|format(r.score) }}</span>
        {% if r.doc_title %}
        <a href="/doc/{{ r.doc_id }}" class="px-2 py-0.5 text-xs rounded-full bg-indigo-50 text-indigo-700 hover:bg-indigo-100">
          {{ r.doc_title }}
        </a>
        {% endif %}
        {% for src in r.match_sources %}
        <span class="px-2 py-0.5 text-xs rounded-full
          {% if src == 'vector' %}bg-blue-50 text-blue-700
          {% elif src == 'bm25' %}bg-amber-50 text-amber-700
          {% elif src == 'concept' %}bg-purple-50 text-purple-700
          {% endif %}
        ">{{ src }}</span>
        {% endfor %}
      </div>
      {% if r.page_start is not none %}
      <span class="text-xs text-gray-400">p. {{ r.page_start }}{% if r.page_end and r.page_end != r.page_start %}–{{ r.page_end }}{% endif %}</span>
      {% endif %}
    </div>

    {% if r.chapter or r.section %}
    <div class="text-xs text-gray-500 mb-2">
      {% if r.chapter %}<span>{{ r.chapter }}</span>{% endif %}
      {% if r.chapter and r.section %} &rsaquo; {% endif %}
      {% if r.section %}<span>{{ r.section }}</span>{% endif %}
    </div>
    {% endif %}

    <p class="text-sm text-gray-700 whitespace-pre-line leading-relaxed">{{ r.content[:500] }}{% if r.content|length > 500 %}...{% endif %}</p>

    {% if r.summary %}
    <p class="text-xs text-gray-500 mt-2 italic">{{ r.summary }}</p>
    {% endif %}
  </div>
  {% endfor %}
</div>
{% else %}
<p class="text-gray-500 text-sm">No results found for "{{ query }}".</p>
{% endif %}