{#
  Navigation macros.

  `go` is the one way a page links to another. Every such link declares its own
  target, trigger and replacement region as attributes -- which is what makes
  each fragment self-sufficient: onward navigation needs nothing the page does
  not already state. The swap replaces <main>, and takes the header and the tree
  from the same response (hx-select-oob), so the reader's place in both moves
  with them. Without htmx each is an ordinary link to a complete page.

  The hx-get below is the attribute the specification's "declarative
  interactivity" requirement names as its implementation.
#}
{% macro go(route, base="") -%}
href="{{ base }}{{ route }}" hx-get="{{ base }}{{ route }}" hx-target="#main" hx-select="#main" hx-select-oob="#topbar,#sidebar" hx-swap="innerHTML{% if '#' not in route %} show:window:top{% endif %}" hx-push-url="true" hx-trigger="click"
{%- endmacro %}

{% macro kind_dot(kind) -%}
<i class="dot k-{{ kind or 'view' }}" aria-hidden="true"></i>
{%- endmacro %}

{#
  One edge group. The heading is the first thing in the section on purpose: both
  directions of an edge are presented by exactly this shape, so nothing in the
  markup says which direction a person typed.
#}
{% macro edge_list(title, members, base, note=None, absent=None, tone=None) %}
{% if members or absent %}
<section class="edges{% if tone %} tone-{{ tone }}{% endif %}">
  <h3>{{ title }}</h3>{% if members %}<span class="n">{{ members | length }}</span>{% endif %}

  {% if note %}<p class="note">{{ note }}</p>{% endif %}
  {% if members %}
  <ul>
  {% for member in members %}
    <li>
      {{ kind_dot(member.kind) }}
      {% if member.route %}
      <a class="edge-target" {{ go(member.route, base) }}>{{ member.label }}</a>
      {% else %}
      <span class="unaddressed" title="not URI-addressed in this class version"
        >{{ member.label }}</span>
      {% endif %}
      {% if member.cascade %}
      <span class="cascade {{ member.cascade }}"
            title="cascade strength of the {{ member.type }} edge">{{ member.cascade }}</span>
      {% endif %}
      <code class="uri">{% if member.type %}<span class="via">{{ member.type }}</span>{% endif %}{{ member.uri }}</code>
    </li>
  {% endfor %}
  </ul>
  {% else %}
  <p class="absent">{{ absent }}</p>
  {% endif %}
</section>
{% endif %}
{% endmacro %}