{#
  A map of the graph, drawn from the layout graphview.py computed at build time.

  Nodes are links, positioned; edges are one SVG drawing underneath them. The
  browser lays nothing out and fetches nothing: every coordinate is in this
  markup, which is why a map is a fragment like any other page.

  On the full map each node and edge carries one class per node whose line it
  lies on, so the page's stylesheet can light a node's whole line on hover,
  focus or :target without a script.
#}
{% from "_links.html" import go %}
{% macro render_map(map, base, full=False) %}
<div class="map-frame{% if full %} is-full{% endif %}">
  <div class="map{% if full %} map-full{% endif %}" style="--w: {{ map.width }}px; --h: {{ map.height }}px; --cw: {{ map.column_width }}px">
    <div class="map-heads" aria-hidden="true">
    {% for column in map.columns %}
      <div class="map-head lane-{{ column.key }}" style="left: {{ column.x }}px">{{ column.title }}<b>{{ column.count }}</b></div>
    {% endfor %}
    </div>
    <div class="map-canvas">
      <svg class="map-edges" width="{{ map.width }}" height="{{ map.height }}" viewBox="0 0 {{ map.width }} {{ map.height }}" aria-hidden="true" focusable="false">
      {% for edge in map.edges %}
        <path class="medge {{ edge.strength }} lane-{{ edge.lanes[0] }} lane-{{ edge.lanes[1] }} {{ edge.classes }}" d="{{ edge.path }}"><title>{{ edge.label }}</title></path>
      {% endfor %}
      </svg>
      <ul class="map-nodes">
      {% for node in map.nodes %}
        <li><a id="{{ node.id }}" class="mnode k-{{ node.kind }} lane-{{ node.lane_key }}{% if node.focus %} is-focus{% endif %} {{ node.classes }}" style="left: {{ node.x }}px; top: {{ node.y }}px" {{ go(node.route, base) }}>{% if node.status %}<i class="state {{ node.status }}"></i>{% endif %}<span class="mlabel">{{ node.label }}</span><span class="mtip"><b>{{ node.kind_name }}</b> {{ node.label }}</span></a></li>
      {% endfor %}
      </ul>
    </div>
  </div>
</div>
{% endmacro %}