{{/*
  The software catalog: every page in content/software/, grouped by its
  `category` in the order of params.softwareGroups (hugo.toml). Each row
  links to the app's page and shows its tagline and where it's installed
  from. A filter box (progressive: hidden without JS) narrows the rows.
*/}}
{{ $s := . }}
{{ $apps := (site.GetPage "/software").RegularPages }}
{{ partial "sections/head.html" $s }}
<div class="cat-tools">
  <nav class="cat-nav" aria-label="Software groups">
    {{ range site.Params.softwareGroups }}
    {{ $n := len (where $apps "Params.category" .name) }}
    {{ if $n }}<a href="#{{ .name | anchorize }}">{{ .name }}<span class="cat-count">{{ $n }}</span></a>{{ end }}
    {{ end }}
  </nav>
  <label class="cat-filter" hidden>
    <span class="visually-hidden">Filter the catalog</span>
    <input type="search" placeholder="Filter {{ len $apps }} titles…" autocomplete="off" spellcheck="false">
  </label>
</div>
<div class="catalog">
  {{ range site.Params.softwareGroups }}
  {{ $group := . }}
  {{ with where $apps "Params.category" $group.name }}
  <section class="cat-group" id="{{ $group.name | anchorize }}">
    <header class="cat-group-head">
      <h3>{{ $group.name }}</h3>
      {{ with $group.blurb }}<p>{{ . }}</p>{{ end }}
    </header>
    <ul class="cat-list">
      {{ range .ByTitle }}
      <li class="cat-row" data-search="{{ lower (delimit (slice .Title (.Params.tagline | default "") (.Params.package | default "") (delimit (.Params.replaces | default slice) " ")) " ") }}">
        <a class="cat-name" href="{{ .RelPermalink }}">{{ .Title }}</a>
        <span class="cat-desc">{{ .Params.tagline | markdownify }}</span>
        <span class="cat-src cat-src-{{ .Params.source | default "pacman" | urlize }}">{{ .Params.source | default "pacman" }}</span>
      </li>
      {{ end }}
    </ul>
  </section>
  {{ end }}
  {{ end }}
  <p class="cat-none" hidden>Nothing matches. Try another word, or <a href="{{ "contribute/" | relURL }}">suggest a title</a>.</p>
</div>
{{ if $s.ctas }}<div class="cta-row">{{ partial "sections/ctas.html" $s.ctas }}</div>{{ end }}
<script>
  (function () {
    var box = document.querySelector('.cat-filter');
    if (!box) return;
    box.hidden = false;
    var input = box.querySelector('input');
    var rows = document.querySelectorAll('.cat-row');
    var groups = document.querySelectorAll('.cat-group');
    var none = document.querySelector('.cat-none');
    input.addEventListener('input', function () {
      var words = input.value.toLowerCase().trim().split(/\s+/).filter(Boolean);
      rows.forEach(function (row) {
        var text = row.dataset.search;
        row.hidden = !words.every(function (w) { return text.indexOf(w) !== -1; });
      });
      var any = false;
      groups.forEach(function (g) {
        var shown = g.querySelector('.cat-row:not([hidden])');
        g.hidden = !shown;
        if (shown) any = true;
      });
      none.hidden = any;
    });
  })();
</script>