{{/*
  Customer paths — one row per customer type, each with its layer fit.
  `strip: true` adds a four-layer strip pinned above the list: hovering or
  focusing a path lights the layers it uses there, and in any `layers`
  section on the page (rows carry data-layer). Mouse devices only.
*/}}
{{ $s := . }}
{{ partial "sections/head.html" $s }}
{{ if $s.strip }}
<div class="layer-strip" aria-hidden="true">
  <span class="layer-strip-label"><span class="strip-idle">Point at a path to see the layers it uses</span><span class="strip-on">Layers this path uses</span></span>
  <ol class="layer-strip-list">
    {{ range hugo.Data.layers }}<li class="strip-layer" data-layer="{{ .key }}"><i></i><em>{{ .name }}</em></li>{{ end }}
  </ol>
</div>
{{ end }}
<ol class="entries path-list">
  {{ range $i, $p := $s.items }}
  <li>
    <a href="{{ $p.link | relURL }}" class="path-row" data-fit="{{ $p.fit | jsonify }}">
      <div class="path-body">
        <span class="path-who"><span class="entry-n">{{ printf "%03d" (add $i 1) }}</span>{{ $p.who }}</span>
        <h3>{{ $p.title }}</h3>
        <p>{{ $p.body | markdownify }}</p>
        <span class="more path-link">{{ replaceRE `\s*[→↗]\s*$` "" ($p.linktext | default "See this path") }}<span class="arrow" aria-hidden="true">→</span></span>
      </div>
      <div class="path-fit">{{ partial "fit.html" (dict "fit" $p.fit "compact" true) }}</div>
    </a>
  </li>
  {{ end }}
</ol>
{{ if $s.strip }}
<script>
  (function () {
    var list = document.currentScript.parentNode.querySelector('.path-list');
    if (!list || !matchMedia('(hover: hover)').matches) return;
    var targets = document.querySelectorAll('.strip-layer[data-layer], .layer-row[data-layer]');
    function light(fit) {
      targets.forEach(function (el) {
        var state = fit ? (fit[el.dataset.layer] || 'no') : '';
        el.classList.toggle('is-lit', state === 'yes');
        el.classList.toggle('is-own', state === 'own');
        el.classList.toggle('is-off', state === 'no');
      });
      document.querySelectorAll('.layer-strip').forEach(function (el) { el.classList.toggle('is-active', !!fit); });
    }
    list.querySelectorAll('.path-row').forEach(function (row) {
      var fit = JSON.parse(row.dataset.fit || '{}');
      row.addEventListener('mouseenter', function () { light(fit); });
      row.addEventListener('focus', function () { light(fit); });
    });
    list.addEventListener('mouseleave', function () { light(null); });
    list.addEventListener('focusout', function (e) { if (!list.contains(e.relatedTarget)) light(null); });
  })();
</script>
{{ end }}
{{ if $s.ctas }}<div class="cta-row">{{ partial "sections/ctas.html" $s.ctas }}</div>{{ end }}