{% extends "base.html" %}
{% block title %}{{ node.id }} · {{ node.title }} · {{ project_name }}{% endblock %}
{% block content %}
{# Breadcrumb = location, H1 = identity (V0.1.2 final polish §4/§5).
   The trail starts at the project and keeps ancestors as `id + title`;
   the current node contributes its id only, because the full title is
   already the H1 one line below. The complete title of every crumb — the
   current one included — stays available through the `title` attribute. #}
<nav class="breadcrumb" aria-label="{{ t("node.breadcrumb") }}" data-i18n-attr="aria-label=node.breadcrumb">
  <ol>
    <li><a class="crumb crumb--root" href="{{ base.index }}" title="{{ project_name }}">{{ project_name }}</a></li>
{% for crumb in breadcrumb %}
    <li>
{% if crumb.current %}
      <span class="crumb is-current" aria-current="page" title="{{ crumb.id }} — {{ crumb.title }}"><span class="mono">{{ crumb.id }}</span></span>
{% else %}
      <a class="crumb" href="{{ crumb.url }}" title="{{ crumb.id }} — {{ crumb.title }}"><span class="mono">{{ crumb.id }}</span> <span class="crumb-title">{{ crumb.title }}</span></a>
{% endif %}
    </li>
{% endfor %}
  </ol>
</nav>

{# --------------------------------------------------------- sticky header #}
<header class="node-head">
  <div class="node-head-main">
    <h1><span class="mono node-id">{{ node.id }}</span><span class="node-title">{{ node.title }}</span></h1>
    <p class="node-meta">
{% if node.is_focus %}
      <span class="focus-pill" title="{{ t("node.focus_title") }}" data-i18n="node.focus_flag" data-i18n-attr="title=node.focus_title">{{ t("node.focus_flag") }}</span>
{% endif %}
      <span class="badge badge--lg" data-status="{{ node.status.raw }}"><span class="shape" aria-hidden="true">{{ node.status.shape }}</span><span{% if node.status.i18n %} data-i18n="{{ node.status.i18n }}"{% endif %}>{{ node.status.label }}</span>{% if node.status.i18n %} <span class="badge-raw mono">{{ node.status.raw }}</span>{% endif %}</span>
      <span class="type-chip">{{ node.type }}</span>
{% if node.last_updated %}
      <span class="muted"><span data-i18n="node.updated">{{ t("node.updated") }}</span> <span class="mono">{{ node.last_updated }}</span></span>
{% endif %}
    </p>
  </div>
  <div class="node-head-side">
    <dl class="tracks" aria-label="{{ t("node.tracks") }}" title="{{ t("node.tracks.hint") }}" data-i18n-attr="aria-label=node.tracks; title=node.tracks.hint">
{% for track in tracks %}
      <div class="track">
        <dt data-i18n="node.track.{{ track.key }}">{{ track.label }}</dt>
        <dd><span class="track-badge" data-track="{{ track.raw }}"><span class="shape" aria-hidden="true">{{ track.shape }}</span><span{% if track.i18n %} data-i18n="{{ track.i18n }}"{% endif %}>{{ track.status_label }}</span>{% if track.i18n %} <span class="badge-raw mono">{{ track.raw }}</span>{% endif %}</span></dd>
      </div>
{% endfor %}
    </dl>
    <div class="node-actions">
      <button type="button" class="btn btn--primary" data-copy-from="capsule-text" data-copied-label="{{ t("action.copied") }}" aria-label="{{ t("action.copy_context.aria") }}" data-i18n="action.copy_context" data-i18n-attr="aria-label=action.copy_context.aria; data-copied-label=action.copied">{{ t("action.copy_context") }}</button>
      <button type="button" class="btn" data-copy-value="{{ node.id }}" data-copied-label="{{ t("action.copied") }}" aria-label="{{ t("action.copy_id.aria") }}" data-i18n="action.copy_id" data-i18n-attr="aria-label=action.copy_id.aria; data-copied-label=action.copied">{{ t("action.copy_id") }}</button>
    </div>
  </div>
</header>
<p class="tracks-hint muted" data-i18n="node.tracks.hint">{{ t("node.tracks.hint") }}</p>

{# ------------------------------------------------------------ next action #}
<section class="panel panel--next" aria-labelledby="next-heading">
  <h2 id="next-heading" data-i18n="node.next_action">{{ t("node.next_action") }}</h2>
{% if node.next_action %}
  <p class="prose">{{ node.next_action }}</p>
{% else %}
  <p class="empty-state" data-i18n="node.next_action.empty">{{ t("node.next_action.empty") }}</p>
{% endif %}
</section>

{# -------------------------------------------------------------- objective #}
<section class="plain-section" aria-labelledby="objective-heading">
  <h2 id="objective-heading" data-i18n="node.objective">{{ t("node.objective") }}</h2>
{% if node.objective %}
  <p class="prose">{{ node.objective }}</p>
{% else %}
  <p class="empty-state" data-i18n="node.objective.empty">{{ t("node.objective.empty") }}</p>
{% endif %}
</section>

{# ----------------------------------------------------------- scope boundary #}
<section class="panel" aria-labelledby="scope-heading">
  <h2 id="scope-heading" data-i18n="node.scope">{{ t("node.scope") }}</h2>
  <p class="muted panel-hint" data-i18n="node.scope.hint">{{ t("node.scope.hint") }}</p>
  <div class="scope-grid">
    <div class="scope-box scope-box--in">
      <h3><span class="scope-icon" aria-hidden="true">✓</span><span data-i18n="node.scope.in">{{ t("node.scope.in") }}</span> <span class="count">{{ node.scope | length }}</span></h3>
{% if node.scope %}
      <ul class="scope-list">
{% for item in node.scope %}        <li>{{ item }}</li>
{% endfor %}      </ul>
{% else %}
      <p class="empty-state" data-i18n="node.scope.in.empty">{{ t("node.scope.in.empty") }}</p>
{% endif %}
    </div>
    <div class="scope-box scope-box--out">
      <h3><span class="scope-icon" aria-hidden="true">✕</span><span data-i18n="node.scope.out">{{ t("node.scope.out") }}</span> <span class="count">{{ node.out_of_scope | length }}</span></h3>
{% if node.out_of_scope %}
      <ul class="scope-list">
{% for item in node.out_of_scope %}        <li>{{ item }}</li>
{% endfor %}      </ul>
{% else %}
      <p class="empty-state" data-i18n="node.scope.out.empty">{{ t("node.scope.out.empty") }}</p>
{% endif %}
    </div>
  </div>
</section>

{# --------------------------------------------------------------- decisions #}
{# UI-D4 ranking: blocking, open, own frozen, inherited frozen, deferred.    #}
{# A blocking section is rendered only when there is something to block on.  #}
{% if node.blocking.count %}
<section class="panel panel--exception" aria-labelledby="blocking-heading">
  <h2 id="blocking-heading"><span class="exception-icon" aria-hidden="true">▲</span><span data-i18n="node.decisions.blocking">{{ t("node.decisions.blocking") }}</span> <span class="count">{{ node.blocking.count }}</span></h2>
{% if node.blocking.shared_source %}
  <p class="group-source"><span data-i18n="node.decisions.source">{{ t("node.decisions.source") }}</span> <span class="mono" title="{{ node.blocking.shared_source }}">{{ node.blocking.shared_source }}</span></p>
{% endif %}
  <ul class="decision-list decision-list--blocking">
{% for decision in node.blocking.decisions %}
    <li class="decision"><span class="decision-id mono">{{ decision.id }}</span><span class="decision-body"><span class="decision-summary">{{ decision.summary }}</span>{% if decision.show_source %}<span class="decision-source" title="{{ decision.source }}"><span data-i18n="node.decisions.source">{{ t("node.decisions.source") }}</span> <span class="mono">{{ decision.source_short }}</span></span>{% endif %}</span></li>
{% endfor %}
  </ul>
</section>
{% endif %}

<section class="panel" aria-labelledby="open-heading">
  <h2 id="open-heading"><span data-i18n="node.decisions.open">{{ t("node.decisions.open") }}</span>{% if node.open.count %} <span class="count">{{ node.open.count }}</span>{% endif %}</h2>
{% if node.open.count %}
{% if node.open.shared_source %}
  <p class="group-source"><span data-i18n="node.decisions.source">{{ t("node.decisions.source") }}</span> <span class="mono" title="{{ node.open.shared_source }}">{{ node.open.shared_source }}</span></p>
{% endif %}
  <ul class="decision-list">
{% for decision in node.open.decisions %}
    <li class="decision"><span class="decision-id mono">{{ decision.id }}</span><span class="decision-body"><span class="decision-summary">{{ decision.summary }}</span>{% if decision.show_source %}<span class="decision-source" title="{{ decision.source }}"><span data-i18n="node.decisions.source">{{ t("node.decisions.source") }}</span> <span class="mono">{{ decision.source_short }}</span></span>{% endif %}</span></li>
{% endfor %}
  </ul>
{% else %}
  <p class="empty-state" data-i18n="node.decisions.open.empty">{{ t("node.decisions.open.empty") }}</p>
{% endif %}
</section>

<section class="panel" aria-labelledby="frozen-heading">
  <h2 id="frozen-heading" data-i18n="node.decisions.frozen">{{ t("node.decisions.frozen") }}</h2>
  <h3><span data-i18n="node.decisions.frozen.own">{{ t("node.decisions.frozen.own") }}</span>{% if node.frozen.count %} <span class="count">{{ node.frozen.count }}</span>{% else %} <span class="subhint" data-i18n="node.decisions.frozen.empty">{{ t("node.decisions.frozen.empty") }}</span>{% endif %}</h3>
{% if node.frozen.count %}
{% if node.frozen.shared_source %}
  <p class="group-source"><span data-i18n="node.decisions.source">{{ t("node.decisions.source") }}</span> <span class="mono" title="{{ node.frozen.shared_source }}">{{ node.frozen.shared_source }}</span></p>
{% endif %}
  <ul class="decision-list">
{% for decision in node.frozen.decisions %}
    <li class="decision"><span class="decision-id mono">{{ decision.id }}</span><span class="decision-body"><span class="decision-summary">{{ decision.summary }}</span>{% if decision.show_source %}<span class="decision-source" title="{{ decision.source }}"><span data-i18n="node.decisions.source">{{ t("node.decisions.source") }}</span> <span class="mono">{{ decision.source_short }}</span></span>{% endif %}</span></li>
{% endfor %}
  </ul>
{% endif %}
  <h3><span data-i18n="node.decisions.inherited">{{ t("node.decisions.inherited") }}</span>{% if inherited_frozen %} <span class="subhint" data-i18n="node.decisions.inherited.hint">{{ t("node.decisions.inherited.hint") }}</span>{% else %} <span class="subhint" data-i18n="node.decisions.inherited.empty">{{ t("node.decisions.inherited.empty") }}</span>{% endif %}</h3>
{% if inherited_frozen %}
{% for group in inherited_frozen %}
  <details class="dgroup"{% if group.open %} open{% endif %}>
    <summary>
      <a class="dgroup-ancestor" href="{{ group.ancestor.url }}" title="{{ group.ancestor.id }} — {{ group.ancestor.title }}"><span class="dgroup-id mono">{{ group.ancestor.id }}</span> <span class="dgroup-title">{{ group.ancestor.title }}</span></a>
      <span class="count" data-i18n="node.decisions.count" data-i18n-args='{{ {"n": group.group.count} | tojson }}'>{{ t("node.decisions.count", n=group.group.count) }}</span>
{% if group.group.shared_source %}
      <span class="dgroup-source" title="{{ group.group.shared_source }}"><span data-i18n="node.decisions.source">{{ t("node.decisions.source") }}</span> <span class="mono">{{ group.group.shared_source_short }}</span></span>
{% elif group.group.source_count %}
      <span class="dgroup-source" data-i18n="node.decisions.sources_n" data-i18n-args='{{ {"n": group.group.source_count} | tojson }}'>{{ t("node.decisions.sources_n", n=group.group.source_count) }}</span>
{% endif %}
    </summary>
    <ul class="decision-list">
{% for decision in group.group.decisions %}
      <li class="decision"><span class="decision-id mono">{{ decision.id }}</span><span class="decision-body"><span class="decision-summary">{{ decision.summary }}</span>{% if decision.show_source %}<span class="decision-source" title="{{ decision.source }}"><span data-i18n="node.decisions.source">{{ t("node.decisions.source") }}</span> <span class="mono">{{ decision.source_short }}</span></span>{% endif %}</span></li>
{% endfor %}
    </ul>
  </details>
{% endfor %}
{% endif %}
</section>

<section class="panel" aria-labelledby="deferred-heading">
  <h2 id="deferred-heading"><span data-i18n="node.decisions.deferred">{{ t("node.decisions.deferred") }}</span>{% if node.deferred.count %} <span class="count">{{ node.deferred.count }}</span>{% endif %}</h2>
{% if node.deferred.count %}
  <details class="dgroup">
    <summary>
      <span class="dgroup-title" data-i18n="node.decisions.deferred">{{ t("node.decisions.deferred") }}</span>
      <span class="count" data-i18n="node.decisions.count" data-i18n-args='{{ {"n": node.deferred.count} | tojson }}'>{{ t("node.decisions.count", n=node.deferred.count) }}</span>
{% if node.deferred.shared_source %}
      <span class="dgroup-source" title="{{ node.deferred.shared_source }}"><span data-i18n="node.decisions.source">{{ t("node.decisions.source") }}</span> <span class="mono">{{ node.deferred.shared_source_short }}</span></span>
{% endif %}
    </summary>
    <ul class="decision-list">
{% for decision in node.deferred.decisions %}
      <li class="decision"><span class="decision-id mono">{{ decision.id }}</span><span class="decision-body"><span class="decision-summary">{{ decision.summary }}</span>{% if decision.show_source %}<span class="decision-source" title="{{ decision.source }}"><span data-i18n="node.decisions.source">{{ t("node.decisions.source") }}</span> <span class="mono">{{ decision.source_short }}</span></span>{% endif %}</span></li>
{% endfor %}
    </ul>
  </details>
{% else %}
  <p class="empty-state" data-i18n="node.decisions.deferred.empty">{{ t("node.decisions.deferred.empty") }}</p>
{% endif %}
</section>

{# --------------------------------------------------------------- relations #}
<section class="panel panel--secondary" aria-labelledby="relations-heading">
  <h2 id="relations-heading" data-i18n="node.relations">{{ t("node.relations") }}</h2>
  <dl class="relations">
    <div class="rel-row">
      <dt data-i18n="node.rel.depends">{{ t("node.rel.depends") }}</dt>
      <dd>
{% if dependencies %}
        <ul class="ref-list">
{% for ref in dependencies %}          <li>{% if ref.known %}<a href="{{ ref.url }}"><span class="mono">{{ ref.id }}</span> {{ ref.title }}</a> <span class="badge" data-status="{{ ref.status.raw }}"><span class="shape" aria-hidden="true">{{ ref.status.shape }}</span><span{% if ref.status.i18n %} data-i18n="{{ ref.status.i18n }}"{% endif %}>{{ ref.status.label }}</span></span>{% else %}<span class="unknown-ref mono">{{ ref.id }}</span> <span class="muted" data-i18n="node.rel.unknown">{{ t("node.rel.unknown") }}</span>{% endif %}</li>
{% endfor %}        </ul>
{% else %}
        <span class="muted" data-i18n="node.rel.none">{{ t("node.rel.none") }}</span>
{% endif %}
      </dd>
    </div>
    <div class="rel-row">
      <dt data-i18n="node.rel.blocks">{{ t("node.rel.blocks") }}</dt>
      <dd>
{% if blocks %}
        <ul class="ref-list">
{% for ref in blocks %}          <li>{% if ref.known %}<a href="{{ ref.url }}"><span class="mono">{{ ref.id }}</span> {{ ref.title }}</a> <span class="badge" data-status="{{ ref.status.raw }}"><span class="shape" aria-hidden="true">{{ ref.status.shape }}</span><span{% if ref.status.i18n %} data-i18n="{{ ref.status.i18n }}"{% endif %}>{{ ref.status.label }}</span></span>{% else %}<span class="unknown-ref mono">{{ ref.id }}</span> <span class="muted" data-i18n="node.rel.unknown">{{ t("node.rel.unknown") }}</span>{% endif %}</li>
{% endfor %}        </ul>
{% else %}
        <span class="muted" data-i18n="node.rel.none">{{ t("node.rel.none") }}</span>
{% endif %}
      </dd>
    </div>
    <div class="rel-row">
      <dt data-i18n="node.rel.related">{{ t("node.rel.related") }}</dt>
      <dd>
{% if related %}
        <ul class="ref-list">
{% for ref in related %}          <li><a href="{{ ref.url }}"><span class="mono">{{ ref.id }}</span> {{ ref.title }}</a> <span class="badge" data-status="{{ ref.status.raw }}"><span class="shape" aria-hidden="true">{{ ref.status.shape }}</span><span{% if ref.status.i18n %} data-i18n="{{ ref.status.i18n }}"{% endif %}>{{ ref.status.label }}</span></span></li>
{% endfor %}        </ul>
{% else %}
        <span class="muted" data-i18n="node.rel.none">{{ t("node.rel.none") }}</span>
{% endif %}
      </dd>
    </div>
{% if supersedes %}
    <div class="rel-row">
      <dt data-i18n="node.rel.supersedes">{{ t("node.rel.supersedes") }}</dt>
      <dd>
        <ul class="ref-list">
{% for ref in supersedes %}          <li>{% if ref.known %}<a href="{{ ref.url }}"><span class="mono">{{ ref.id }}</span> {{ ref.title }}</a>{% else %}<span class="unknown-ref mono">{{ ref.id }}</span> <span class="muted" data-i18n="node.rel.unknown">{{ t("node.rel.unknown") }}</span>{% endif %}</li>
{% endfor %}        </ul>
      </dd>
    </div>
{% endif %}
{% if superseded_by %}
    <div class="rel-row">
      <dt data-i18n="node.rel.superseded_by">{{ t("node.rel.superseded_by") }}</dt>
      <dd>
        <ul class="ref-list">
{% for ref in superseded_by %}          <li><a href="{{ ref.url }}"><span class="mono">{{ ref.id }}</span> {{ ref.title }}</a></li>
{% endfor %}        </ul>
      </dd>
    </div>
{% endif %}
  </dl>
</section>

{# ----------------------------------------------------------------- sources #}
<section class="panel panel--secondary" aria-labelledby="sources-heading">
  <h2 id="sources-heading" data-i18n="node.sources">{{ t("node.sources") }}</h2>
  <div class="two-col">
    <div>
      <h3 data-i18n="node.sources.canonical">{{ t("node.sources.canonical") }}</h3>
{% if node.canonical_sources %}
      <ul class="source-list">
{% for source in node.canonical_sources %}        <li><span class="path mono">{{ source.path }}</span>{% if source.label %} <span class="src-tag" data-kind="{{ source.label }}">{{ source.label }}</span>{% endif %}</li>
{% endfor %}      </ul>
{% else %}
      <p class="empty-state" data-i18n="node.sources.none">{{ t("node.sources.none") }}</p>
{% endif %}
    </div>
    <div>
      <h3 data-i18n="node.sources.evidence">{{ t("node.sources.evidence") }}</h3>
{% if node.evidence_sources %}
      <ul class="source-list">
{% for source in node.evidence_sources %}        <li><span class="path mono">{{ source.path }}</span>{% if source.label %} <span class="src-tag" data-kind="{{ source.label }}">{{ source.label }}</span>{% endif %}</li>
{% endfor %}      </ul>
{% else %}
      <p class="empty-state" data-i18n="node.sources.none">{{ t("node.sources.none") }}</p>
{% endif %}
    </div>
  </div>
</section>

{# ------------------------------------------------------------------ resume #}
<section class="panel resume" aria-labelledby="resume-heading">
  <h2 id="resume-heading"><span data-i18n="node.resume">{{ t("node.resume") }}</span> <span class="count" data-i18n="node.resume.size" data-i18n-args='{{ {"lines": capsule_stats.lines, "size": capsule_stats.size} | tojson }}'>{{ capsule_stats.summary }}</span></h2>
  <p class="muted panel-hint" data-i18n="node.resume.hint" data-i18n-args='{{ {"cmd": "pcp context " ~ node.id} | tojson }}'>{{ t("node.resume.hint", cmd="pcp context " ~ node.id) }}</p>
  <div class="resume-actions">
    <button type="button" class="btn btn--primary" data-copy-from="capsule-text" data-copied-label="{{ t("action.copied") }}" aria-label="{{ t("action.copy_context.aria") }}" data-i18n="action.copy_context" data-i18n-attr="aria-label=action.copy_context.aria; data-copied-label=action.copied">{{ t("action.copy_context") }}</button>
  </div>
  <div class="copy-fallback" hidden>
    <p class="hint" data-i18n="action.copy_fallback.hint">{{ t("action.copy_fallback.hint") }}</p>
    <textarea readonly aria-label="{{ t("action.copy_fallback.aria") }}" data-i18n-attr="aria-label=action.copy_fallback.aria">{{ capsule }}</textarea>
  </div>
  <details class="capsule-details">
    <summary><span data-i18n="node.resume.show">{{ t("node.resume.show") }}</span> <span class="count" data-i18n="node.resume.size" data-i18n-args='{{ {"lines": capsule_stats.lines, "size": capsule_stats.size} | tojson }}'>{{ capsule_stats.summary }}</span></summary>
    <pre id="capsule-text" class="capsule-text">{{ capsule }}</pre>
  </details>
</section>
{% endblock %}