<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>{% block title %}mgf-fed-web — federation control surface{% endblock %}</title>
  <link rel="icon" href="/static/brand/logo/magogi-favicon.svg">
  {# The shared mgf-brand-web kit, in canonical load order, then the instrument
     layer — mounted from the package, not vendored (one source of truth). #}
  <link rel="stylesheet" href="/static/brand/tokens.css">
  <link rel="stylesheet" href="/static/brand/fonts.css">
  <link rel="stylesheet" href="/static/brand/base.css">
  <link rel="stylesheet" href="/static/brand/components.css">
  <link rel="stylesheet" href="/static/brand/instruments.css">
  {# App shell only (topbar / rail / readout layout); every component is the kit's. #}
  <link rel="stylesheet" href="/static/app.css">
</head>
{% import "macros.html" as m %}
<body>
<div class="fw-app">
  <header class="fw-topbar">
    <a class="fw-mark" href="/">
      <img class="fw-mark__glyph" src="/static/brand/logo/magogi-icon-on-dark.svg" alt="">
      <span class="fw-mark__txt">mgf-fed-web<span class="fw-mark__sub">federation control surface</span></span>
    </a>
    <span class="fw-spacer"></span>
    <span class="fw-lastcheck mono">{{ chrome.check_mode }} check · {{ chrome.last_checked }}</span>
    <span class="fw-gpill" title="Global sync — the worst project state, aggregated">
      <span class="fw-gpill__dot fw-dot--{{ chrome.pill.state|lower|replace('_','-') }}"></span>
      <span class="fw-gpill__label">{{ chrome.pill.label }}</span>
      {% if chrome.pill.counts %}<span class="fw-gpill__counts mono">{{ chrome.pill.counts }}</span>{% endif %}
    </span>
    {# Global sync actions — fan out across every project, aggregate into the pill
       (spec §5.5). Check all is safe (deep, non-mutating); Force-sync all is the
       affirmative mutation (gold) behind a confirm disclosure. #}
    <form class="fw-actform" method="post" action="/check-all">
      <button class="button button-secondary button-sm" type="submit"
              data-transient="CHECKING" data-busy="Checking all…">Check all</button>
    </form>
    <details class="fw-confirm">
      <summary class="button button-sm fw-act--gold">Force-sync all</summary>
      <div class="fw-confirm__pop">
        <p class="fw-confirm__warn">Rebuilds <span class="mono">generated/</span> for every drifting
          project in the working tree — uncommitted; you commit project-side.</p>
        <form method="post" action="/force-sync-all">
          <button class="button button-accent button-sm" type="submit"
                  data-transient="SYNCING" data-busy="Force-syncing…">Force-sync all</button>
        </form>
      </div>
    </details>
    <button class="button button-secondary button-sm" type="button" onclick="window.print()">Print / Export</button>
  </header>

  <div class="fw-body">
    <nav class="fw-rail" aria-label="Federation navigation">
      <div class="fw-rail__h">Federation</div>
      <a class="fw-nav {% if chrome.active == 'overview' %}fw-nav--on{% endif %}" href="/">
        <span class="fw-dot fw-dot--{{ chrome.pill.state|lower|replace('_','-') }}"></span>
        <span class="fw-nav__main">
          <span class="fw-nav__name">Federation overview</span>
          <span class="fw-nav__kind">all projects combined</span>
        </span>
      </a>

      <div class="fw-rail__h">Projects</div>
      {% for p in chrome.projects %}
      <a class="fw-nav {% if chrome.active == p.slug %}fw-nav--on{% endif %}" href="/p/{{ p.slug }}">
        <span class="fw-dot fw-dot--{{ p.sync_state|lower|replace('_','-') }}"></span>
        <span class="fw-nav__main">
          <span class="fw-nav__name">{{ p.name }}</span>
          <span class="fw-nav__kind">{{ p.kind }}</span>
        </span>
      </a>
      {% else %}
      <p class="fw-rail__empty mono">no projects discovered</p>
      {% endfor %}

      <section class="fw-legend" aria-label="State language">
        <div class="fw-legend__h">State language</div>
        {% for state, desc in chrome.legend %}
        <div class="fw-legend__row">
          <span class="fw-dot fw-dot--{{ state|lower|replace('_','-') }}"></span>
          <b>{{ state }}</b>
        </div>
        <div class="fw-legend__desc">{{ desc }}</div>
        {% endfor %}
        <p class="fw-legend__note">
          Provenance (commits · hashes · times) is mono. {{ m.derived() }} = inferred by
          mgf-fed-web, never project-reported fact.
        </p>
      </section>
    </nav>

    <main class="fw-main">{% block main %}{% endblock %}</main>
  </div>
</div>
{# Progressive enhancement (no framework): keep a sync action's name through the
   flow — Force-sync → "Force-syncing…" — and flip the acted chip to its transient
   CHECKING/SYNCING state while the POST round-trips (spec §1.5, §5.9). Degrades to
   a plain POST with JS off; never load-bearing — the server re-renders the resolved
   state regardless, and a cancelled confirm() (defaultPrevented) is left untouched. #}
<script>
  document.addEventListener("submit", function (e) {
    if (e.defaultPrevented) return;
    var btn = e.target.querySelector("button[data-transient]");
    if (!btn) return;
    var state = btn.getAttribute("data-transient");
    btn.classList.add("is-busy");
    if (btn.dataset.busy) btn.textContent = btn.dataset.busy;
    btn.disabled = true;
    var scope = e.target.closest("tr, .fw-phead");
    var chip = scope && scope.querySelector(".status-chip");
    if (chip) {
      chip.className = "status-chip status-chip--" + state.toLowerCase();
      chip.innerHTML = '<span class="spinner"></span>' + state;
    }
  }, false);
</script>
</body>
</html>
