{% extends "base.html" %}
{% from "_map.html" import render_map %}
{#
  The whole graph as one map, from the same build as every node page.

  All of its interaction is a stylesheet: the lane toggles are checkboxes whose
  state `:has()` reads, and a node's line lights up from classes the layout
  wrote onto every node and edge on it. Hover and keyboard focus light a line;
  arriving at /graph#<id> from a node page lights that node's line until another
  is hovered.
#}
{% block main %}
<article class="page page-wide graph-view">
  <header class="page-head compact">
    <div class="eyebrow">
      <span class="kind-badge">Map</span>
      <span class="meta-item">{{ map.nodes | length }} nodes &middot; {{ map.edges | length }} connections</span>
    </div>
    <h1>The whole graph, left to right</h1>
    <p class="lede">From the value it serves, through the bets and requirements beneath it, to the code that implements them and the evidence that tests them. Hover or tab to a node to trace its line; select it to open its page.</p>
  </header>

  <div class="map-toolbar">
    <fieldset class="chips">
      <legend class="sr-only">Lanes to show</legend>
      {% for column in map.columns %}
      <label class="chip"><input type="checkbox" id="show-{{ column.key }}" checked><span>{{ column.title }}</span></label>
      {% endfor %}
    </fieldset>
    <ul class="legend">
      <li><i class="swatch hard"></i>Hard cascade</li>
      <li><i class="swatch soft"></i>Soft</li>
      <li><i class="swatch none"></i>No cascade</li>
    </ul>
  </div>

  {{ render_map(map, base, full=True) }}

  <style>
  {% for column in map.columns %}
    .graph-view:has(#show-{{ column.key }}:not(:checked)) .lane-{{ column.key }} { opacity: 0; pointer-events: none; }
  {% endfor %}
  {% for node in map.nodes %}
    .map-full:has(#{{ node.id }}:is(:hover, :focus-visible)) :is(.mnode, .medge):not(.l{{ node.index }}),
    .map-full:not(:has(.mnode:is(:hover, :focus-visible))):has(#{{ node.id }}:target) :is(.mnode, .medge):not(.l{{ node.index }}) { opacity: .1; }
  {% endfor %}
  </style>
</article>
{% endblock %}