{% from "_partials/status.html" import status %}
{% macro doc_card(d) %}
<article class="doc-card" data-doc-card
         data-text="{{ (d.id ~ ' ' ~ (d.title or '') ~ ' ' ~ d.tags | join(' ')) | lower }}">
  <header>
    <a class="name" href="/ui/docs/{{ d.id | urlencode }}?repo={{ d.repo | urlencode }}">{{ d.title or d.id }}</a>
    {% if d.revision %}<span class="badge badge-summarized">{{ d.revision }}</span>{% endif %}
    <span class="badge badge-mode">{{ d.repo }}</span>
  </header>
  {% if d.summary %}<p class="summary">{{ d.summary }}</p>{% endif %}
  <p class="chips">
    {% for t in d.tags %}<a class="chip" href="/ui?tags={{ t | urlencode }}">{{ t }}</a>
    {% else %}<span class="chip" style="opacity:.6">no tags</span>{% endfor %}
    <a class="open-doc" href="/ui/docs/{{ d.id | urlencode }}?repo={{ d.repo | urlencode }}">open sections →</a>
  </p>
</article>
{% endmacro %}

{% macro result_card(r) %}
<article class="result-card">
  <header>
    <span class="badge badge-{{ r.kind }}">{{ r.kind_label }}</span>
    <a class="cite" href="{{ r.href }}">{{ r.citation }}</a>
    {{ status(r.status) }}
    <span class="badge badge-mode">{{ r.match_mode }}</span>
    <span class="tk">{{ r.tokens }} tk
      <span class="score-track"><span class="score-fill" style="width:{{ r.score_pct }}%"></span></span>
    </span>
  </header>
  <h2>{{ r.title }}</h2>
  <div class="body">{{ r.body_html | safe }}</div>
  <footer>
    <button type="button" data-toggle-card aria-expanded="false">expand</button>
    <span class="sep">|</span>
    <button type="button" data-copy-text="{{ r.citation }}">copy citation</button>
    <span class="sep">|</span>
    <a href="{{ r.href }}">open reader</a>
    <span class="file">{{ r.file }}</span>
  </footer>
</article>
{% endmacro %}

{% macro menu_hits(q, results, label, action) %}
<p class="meta-line">{{ results | length }} sections in {{ label }} for “{{ q }}” ·
  <a href="{{ action }}">clear search</a></p>
<div class="stack-md" style="gap:10px">
  {% for r in results %}{{ result_card(r) }}
  {% else %}
  <div class="empty-state">
    <p>No matching section found in {{ label }}.</p>
    <p>Try other keywords, or search all menus from the top box.</p>
  </div>
  {% endfor %}
</div>
{% endmacro %}