{# The app chrome — the kit's .mgf-console shell (mgf/console.html, M1 P4.2)
   with fed-web's chrome in its blocks: last-check line + the global sync pill
   + the global actions in the top bar; the federation/project nav + the
   state-language legend in the rail. The shell markup/CSS live in
   mgf-brand-web (one source of truth); only fed-web content lives here. #}
{% extends "mgf/console.html" %}

{% block title %}mgf-fed-web — federation control surface{% endblock %}
{% block mark_title %}mgf-fed-web{% endblock %}
{% block mark_sub %}federation control surface{% endblock %}

{% block topbar %}
    <span class="fw-lastcheck mono">{{ chrome.check_mode }} check · {{ chrome.last_checked }}</span>
    <span class="mgf-console__pill" title="Global sync — the worst project state, aggregated">
      <span class="status-indicator status-indicator--{{ chrome.pill.state|lower|replace('_','-') }}"></span>
      <span class="mgf-console__pill-label">{{ chrome.pill.label }}</span>
      {% if chrome.pill.counts %}<span class="mgf-console__pill-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>
{% endblock %}

{% block rail_label %}Federation navigation{% endblock %}
{% block rail %}
      {% import "macros.html" as m %}
      <div class="mgf-console__rail-h">Federation</div>
      <a class="mgf-console__nav {% if chrome.active == 'overview' %}mgf-console__nav--on{% endif %}" href="/">
        <span class="status-indicator status-indicator--{{ chrome.pill.state|lower|replace('_','-') }}"></span>
        <span class="mgf-console__nav-main">
          <span class="mgf-console__nav-name">Federation overview</span>
          <span class="mgf-console__nav-kind">all projects combined</span>
        </span>
      </a>

      <div class="mgf-console__rail-h">Projects</div>
      {% for p in chrome.projects %}
      <a class="mgf-console__nav {% if chrome.active == p.slug %}mgf-console__nav--on{% endif %}" href="/p/{{ p.slug }}">
        <span class="status-indicator status-indicator--{{ p.sync_state|lower|replace('_','-') }}"></span>
        <span class="mgf-console__nav-main">
          <span class="mgf-console__nav-name">{{ p.name }}</span>
          <span class="mgf-console__nav-kind">{{ p.kind }}</span>
        </span>
      </a>
      {% else %}
      <p class="mgf-console__rail-empty mono">no projects discovered</p>
      {% endfor %}

      <section class="mgf-console__legend" aria-label="State language">
        <div class="mgf-console__legend-h">State language</div>
        {% for state, desc in chrome.legend %}
        <div class="mgf-console__legend-row">
          <span class="status-indicator status-indicator--{{ state|lower|replace('_','-') }}"></span>
          <b>{{ state }}</b>
        </div>
        <div class="mgf-console__legend-desc">{{ desc }}</div>
        {% endfor %}
        <p class="mgf-console__legend-note">
          Provenance (commits · hashes · times) is mono. {{ m.derived() }} = inferred by
          mgf-fed-web, never project-reported fact.
        </p>
      </section>
{% endblock %}

{% block scripts %}
{# 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>
{% endblock %}