{% if hits %}
  <table class="grid" id="spec-doc-search-results-table">
    <thead>
      <tr>
        <th>Chunk</th>
        <th>Spec</th>
        <th>Version</th>
        <th>Sections</th>
        <th>Tables</th>
        <th>Mode</th><th>Score</th>
      </tr>
    </thead>
    <tbody>
      {% for hit in hits %}
        <tr>
          <td><code>{{ hit.chunk_id }}</code></td>
          <td>
            {% if hit.spec_id and hit.version %}
              <a href="/specs/{{ hit.spec_id | urlencode }}/docs?version={{ hit.version | urlencode }}#chunk-{{ hit.chunk_index }}">
                <code>{{ hit.spec_id }}</code>
              </a>
            {% else %}
              <code>-</code>
            {% endif %}
          </td>
          <td>{{ hit.version or '-' }}</td>
          <td>
            {% if hit.sections %}
              <span style="white-space: pre-line">{{ hit.sections }}</span>
            {% else %}-{% endif %}
          </td>
          <td>
            {% if hit.tables %}
              <span style="white-space: pre-line">{{ hit.tables }}</span>
            {% else %}-{% endif %}
          </td>
          <td>{{ hit.search_mode.value }}</td>
          <td>{{ '%.4f' | format(hit.score) if hit.score is not none else '-' }}</td>
        </tr>
        {% if hit.previews is not none and hit.previews %}
          <tr class="preview-row">
            <td colspan="7">
              <details class="hit-details">
                <summary>Matching fields</summary>
                {% for col, snippet in hit.previews.items() %}
                  <div class="preview-field">
                    <span class="preview-label">{{ col }}</span>
                    <pre>{{ snippet }}</pre>
                  </div>
                {% endfor %}
              </details>
            </td>
          </tr>
        {% endif %}
      {% endfor %}
    </tbody>
  </table>
{% else %}
  <p class="empty">No matches.</p>
{% endif %}