{% extends "base.html" %}
{% from "_links.html" import go %}
{#
  Compound capabilities: the realizes/requires projection, drawn from the same
  build as the map. A compound capability contains the components its span
  encompasses; overlap without containment is shown as a looser cluster, never as
  a containment. Authored nowhere -- read from the graph's edges (ADR 2026-09-28).
#}
{% block main %}
<article class="page page-wide compound-view">
  <header class="page-head compact">
    <div class="eyebrow">
      <span class="kind-badge">Compound capabilities</span>
      <span class="meta-item">{{ compound.compounds | length }} compound &middot; {{ compound.overlaps | length }} overlap</span>
    </div>
    <h1>Compound capabilities</h1>
    <p class="lede">A capability whose realizes/requires span encompasses the entire span of one or more others is compound; those others are its components. Containment is a partial order the single-parent tree cannot show, so it lives only here. Hard where the shared span rests on requirements, soft where it rests on a contract.</p>
    <a class="chip chip-link" href="{{ base }}/graph">&larr; Back to the map</a>
  </header>

  {% if not compound.compounds and not compound.overlaps %}
  <p class="empty">No compound capabilities: no two capabilities' spans stand in containment, and none merely overlap. Every capability's boundary footprint is its own.</p>
  {% endif %}

  {% if compound.compounds %}
  <section class="compound-list">
    <h2>Compound &rarr; components</h2>
    {% for c in compound.compounds %}
    <article class="compound-node">
      <h3>{% if c.status %}<i class="state {{ c.status }}"></i>{% endif %}
        {% if c.route %}<a {{ go(c.route, base) }}>{{ c.label }}</a>{% else %}{{ c.label }}{% endif %}
        <span class="meta-item">subsumes {{ c.components | length }}</span>
      </h3>
      <ul class="component-list">
        {% for comp in c.components %}
        <li class="component {{ comp.strength }}">
          {% if comp.route %}<a {{ go(comp.route, base) }}>{{ comp.label }}</a>{% else %}{{ comp.label }}{% endif %}
          <i class="swatch {{ comp.strength }}"></i><span class="tag">{{ comp.strength }}{% if comp.contract_mediated %}, lower bound{% endif %}</span>
        </li>
        {% endfor %}
      </ul>
    </article>
    {% endfor %}
  </section>
  {% endif %}

  {% if compound.overlaps %}
  <section class="overlap-list">
    <h2>Overlap clusters</h2>
    <p class="lede">Spans that intersect without containment: interdependent, but neither compound over the other.</p>
    <ul>
      {% for pair in compound.overlaps %}
      <li class="overlap-pair">
        {% for member in pair %}{% if not loop.first %} &harr; {% endif %}{% if member.route %}<a {{ go(member.route, base) }}>{{ member.label }}</a>{% else %}{{ member.label }}{% endif %}{% endfor %}
      </li>
      {% endfor %}
    </ul>
  </section>
  {% endif %}
</article>
{% endblock %}