{% extends "base.html" %}
{% from "_links.html" import go, kind_dot %}
{% block main %}
<article class="page overview">
  <header class="hero">
    <div class="eyebrow">
      <span class="kind-badge">Overview</span>
      <span class="meta-item">{{ counts.total }} nodes &middot; {{ counts.edges }} edges</span>
    </div>
    <h1>Specification graph</h1>
    <p class="lede">
      Why each part of this system exists, what would prove it wrong, and what else
      stops being true when it is. Read from this checkout and pre-rendered: there is
      no server, no database and no request-time work.
    </p>
    <div class="actions">
      <a class="btn primary" {{ go("/graph", base) }}>Open the map</a>
      <a class="btn" {{ go("/registry", base) }}>Hypothesis registry</a>
      <a class="btn ghost" {{ go("/search", base) }}>Search <kbd>Alt K</kbd></a>
    </div>
  </header>

  <ul class="stats">
  {% for stat in stats %}
    <li class="stat k-{{ stat.kind }}">
      <span class="stat-label">{{ kind_dot(stat.kind) }}{{ stat.label }}</span>
      <strong>{{ stat.value }}</strong>
      <span class="stat-detail">{{ stat.detail }}</span>
    </li>
  {% endfor %}
  </ul>

  <h2>Roots</h2>
  {% for value in values %}
  <section class="value-block">
    <a class="value-title" {{ go(value.link.route, base) }}>{{ kind_dot("value") }}<span>{{ value.link.label }}</span></a>
    <p class="note">The value at the top of the tree, and the bets made to deliver it.</p>
    <ul class="cap-grid">
    {% for cap in value.capabilities %}
      <li class="cap-card{% if cap.status %} status-{{ cap.status }}{% endif %}">
        <div class="cap-top">
          {% if cap.status %}<span class="status {{ cap.status }}">{{ cap.status }}</span>{% endif %}
          <span class="meta-item">{{ cap.domains }} domain{% if cap.domains != 1 %}s{% endif %} &middot; {{ cap.requirements }} requirement{% if cap.requirements != 1 %}s{% endif %}</span>
        </div>
        <a class="cap-title" {{ go(cap.link.route, base) }}>{{ cap.link.label }}</a>
        {% if cap.hypothesis %}<p class="cap-hypothesis">{{ cap.hypothesis }}</p>{% endif %}
        {% if cap.cascade %}
        <a class="cap-foot" {{ go(cap.cascade, base) }}>
          <span class="count-chip hard">{{ cap.invalidated }} invalidated</span>
          <span class="count-chip soft">{{ cap.flagged }} flagged</span>
          <span class="more">Blast radius <span aria-hidden="true">&rarr;</span></span>
        </a>
        {% endif %}
      </li>
    {% endfor %}
    </ul>
  </section>
  {% else %}
  <p class="absent">No level-1 nodes.</p>
  {% endfor %}

  <div class="split">
    <section class="panel">
      <h2>Coverage</h2>
      <p class="note">Success criteria bound to something that executes, per layer.</p>
      <ul class="coverage">
      {% for layer in coverage %}
        <li>
          <span class="cov-label">Level {{ layer.layer }} <span class="meta-item">{{ layer.assertion }}</span></span>
          <span class="bar"><i style="width: {{ '%.1f' | format(layer.ratio * 100) }}%"></i></span>
          <span class="num">{{ layer.bound }}/{{ layer.total }}</span>
        </li>
      {% endfor %}
      </ul>
    </section>

    <section class="panel">
      <h2>Contracts</h2>
      {% if contracts %}
      <ul class="plain-list contracts">
      {% for member in contracts %}
        <li><a {{ go(member.route, base) }}>{{ kind_dot("contract") }}{{ member.label }}</a>
            <code class="uri">{{ member.uri }}</code></li>
      {% endfor %}
      </ul>
      {% else %}
      <p class="absent">No contracts.</p>
      {% endif %}

      <h2>By kind</h2>
      <table class="compact">
        <thead><tr><th>Kind</th><th class="num">Nodes</th><th class="num">Addressable</th></tr></thead>
        <tbody>
        {% for kind, figures in kinds %}
          <tr><td><code>{{ kind }}</code></td><td class="num">{{ figures.total }}</td><td class="num">{{ figures.addressable }}</td></tr>
        {% endfor %}
        </tbody>
      </table>
    </section>
  </div>

  {# Pages no edge surfaces. A requirement nothing delegates to and an ADR
     nothing cites have no in-edges; carried here so every page the site writes
     stays reachable by clicking from the one page a visitor is guaranteed to
     reach. #}
  {% if orphans %}
  <section class="panel appendix">
    <h2>Appendix</h2>
    <p class="note">
      Pages no other page links to, carried here so that every page in this site
      is reachable by following links from this one.
    </p>
    <ul class="plain-list">
    {% for member in orphans %}
      <li><a href="{{ base }}{{ member.route }}">{{ member.label }}</a>
          <code class="uri">{{ member.route }}</code></li>
    {% endfor %}
    </ul>
  </section>
  {% endif %}
</article>
{% endblock %}