{% extends "base.html" %}
{% from "_links.html" import edge_list, go, kind_dot %}
{% from "_map.html" import render_map %}
{% block main %}
<article class="page node k-{{ kind or 'view' }}">
  {% include "_crumbs.html" %}
  <header class="page-head">
    <div class="eyebrow">
      <span class="kind-badge k-{{ kind or 'view' }}">{{ kind_dot(kind) }}{{ kind_name }}</span>
      {% if node.level %}<span class="meta-item">Level {{ node.level }}</span>{% endif %}
      {% if registry_status %}<span class="status {{ registry_status }}">{{ registry_status }}</span>{% endif %}
      {% if node.attr("evidence_kind") %}<span class="tag">{{ node.attr("evidence_kind") }}</span>{% endif %}
      {% if node.attr("observed") %}<span class="meta-item">Observed {{ node.attr("observed") }}</span>{% endif %}
    </div>
    <h1>{{ node.label }}</h1>
    <code class="uri-chip">{{ node.uri }}</code>
    {% if cascade_route or map_id %}
    <div class="actions">
      {% if cascade_route %}
      <a class="btn primary" {{ go(cascade_route, base) }}>What stops being true if this is falsified?</a>
      {% endif %}
      {% if map_id %}
      {# A plain link on purpose: a full load is what makes :target light this
         node's line on the map. #}
      <a class="btn" href="{{ base }}/graph#{{ map_id }}">Show on the map</a>
      {% endif %}
    </div>
    {% endif %}
  </header>

  {% if neighbourhood.nodes | length > 1 %}
  <div class="panel neighbourhood">
    <div class="panel-head">
      <h2>Neighbourhood</h2>
      <p class="note">Everything one edge away, in the map's lanes.</p>
    </div>
    {{ render_map(neighbourhood, base) }}
  </div>
  {% endif %}

  <div class="page-grid">
    <div class="page-main">
      {% if hypothesis %}
      <div class="hypothesis-card">
        <h2>Hypothesis</h2>
        <blockquote>{{ hypothesis }}</blockquote>
        {% if criteria %}
        <h3>Falsified when</h3>
        <ul class="criteria">{% for item in criteria %}<li>{{ item }}</li>{% endfor %}</ul>
        {% else %}
        <p class="absent">No falsification criteria are recorded.</p>
        {% endif %}
      </div>
      {% endif %}

      {# The node's own prose, rendered from Markdown with raw HTML disabled: the
         renderer escapes anything that is not CommonMark, so a note is data and
         an author cannot put elements onto every reader's page. Relative links
         between notes are rewritten to the routes of the nodes they name. A
         requirement renders its text and its scenarios, each anchored by slug,
         with the code it names linked to the code's page. #}
      {% if body %}
      <section class="body">
        {{ body }}
      </section>
      {% elif not hypothesis %}
      <p class="absent">This node carries no prose of its own; its connections say what it is for.</p>
      {% endif %}

      {% if pending %}
      <div class="panel pending">
        <h3>Pending delegations</h3>
        <p class="note">Proposed but not yet archived into <code>openspec/specs/</code>.</p>
        <ul>{% for item in pending %}<li><code>{{ item }}</code></li>{% endfor %}</ul>
      </div>
      {% endif %}
    </div>

    <aside class="rail">
      {# Both directions are presented the same way. Which one an author typed is an
         implementation detail of the class, and surfacing it would invite people to
         treat the other direction as second-class. #}
      <nav class="graph" aria-label="Graph">
      {{ edge_list("Parent", parents, base) }}
      {{ edge_list("Children", children, base, absent="No children are recorded.") }}
      {{ edge_list("Delegated capabilities", delegated, base) }}
      {{ edge_list("Required contracts", contracts, base) }}
      {{ edge_list("Implemented by", implemented, base) }}
      {{ edge_list("Evidence against", against, base, tone="hard") }}
      {{ edge_list("Evidence for", support, base, tone="live") }}
      {{ edge_list("Bears on", bears_on, base) }}
      {{ edge_list("Tests cited", tests, base) }}
      {{ edge_list("Other edges", others, base) }}
      </nav>

      <div class="panel identity-card">
        <h3>Identity</h3>
        <dl class="identity">
          <dt>URI</dt><dd><code>{{ node.uri }}</code></dd>
          <dt>Kind</dt><dd>{{ node.kind }}</dd>
          {% if node.level %}<dt>Level</dt><dd>{{ node.level }}</dd>{% endif %}
          {% if node.venture %}<dt>Venture</dt><dd>{{ node.venture }}</dd>{% endif %}
          {% if node.status %}<dt>Status</dt><dd>{{ node.status }}</dd>{% endif %}
          {% if node.attr("evidence_kind") %}<dt>Evidence kind</dt><dd>{{ node.attr("evidence_kind") }}</dd>{% endif %}
          {% if node.attr("observed") %}<dt>Observed</dt><dd>{{ node.attr("observed") }}</dd>{% endif %}
          {% if node.source %}<dt>Source</dt><dd><code>{{ node.source }}</code></dd>{% endif %}
        </dl>
      </div>
    </aside>
  </div>
</article>
{% endblock %}