{% extends "base.html" %}
{% from "_links.html" import go, kind_dot %}
{#
  Every page in the site, as links, grouped the way the map's lanes are.

  This is a page, so it has a URL, the back button returns to it, and with
  scripting off it is still a complete directory the browser's own find can
  search. With htmx, typing filters the list: the handler is declared on the
  input it governs (hx-on) and only hides and shows links already on the page.
  It fetches nothing and navigates nowhere -- choosing a result is an ordinary
  link.
#}
{% block main %}
<article class="page search-page">
  <header class="page-head compact">
    <h1>Search</h1>
    <p class="lede">Every page in the graph. Type to filter, then pick a result. Press <kbd>Alt</kbd> <kbd>K</kbd> from any page to come back here.</p>
  </header>

  <div class="search-box">
    <svg viewBox="0 0 20 20" aria-hidden="true"><circle cx="9" cy="9" r="5.5"/><path d="m13.2 13.2 3.8 3.8"/></svg>
    <input type="search" id="search-input" name="q" placeholder="Requirements, capabilities, code, evidence…"
           autocomplete="off" spellcheck="false" autofocus aria-controls="search-results"
           hx-on:input="const q = this.value.trim().toLowerCase(); let shown = 0; document.querySelectorAll('#search-results li').forEach(function (li) { const hit = !q || li.textContent.toLowerCase().includes(q); li.hidden = !hit; if (hit) shown++; }); document.querySelectorAll('#search-results .search-group').forEach(function (group) { group.hidden = !group.querySelector('li:not([hidden])'); }); document.getElementById('search-empty').hidden = shown > 0;">
  </div>

  <p class="absent" id="search-empty" hidden>Nothing in the graph matches.</p>

  <div id="search-results">
  {% for group in groups %}
    <section class="search-group">
      <h2>{{ group.title }} <span class="n">{{ group.entries | length }}</span></h2>
      <ul>
      {% for item in group.entries %}
        <li><a class="result" {{ go(item.route, base) }}>{{ kind_dot(item.kind) }}<span class="result-label">{{ item.label }}</span><code class="uri">{{ item.detail }}</code></a></li>
      {% endfor %}
      </ul>
    </section>
  {% endfor %}
  </div>
</article>
{% endblock %}