{# Executive — KPI strip (in-panel, Overview only).

   Six tiles in a responsive grid; locked left-to-right order:
     AIVSS / Findings / Probes / Elapsed / Cost / Coverage

   QA-043 (2026-06-02):
     - CRITICAL + HIGH severity tiles removed; their dot-cluster mini-chart
       restated info that lives in the FINDINGS bar chart further down the
       Overview page. Grid drops from 8 → 6 columns.

   QA-065 + QA-066 (2026-06-04):
     - Standalone BAND tile removed. The band label already rides along on
       the AIVSS tile as its sub-caption (``data-live="band-sub"``), so a
       second tile restating the same band was redundant.
     - PROBES tile added: the count of probe attempts actually dispatched
       (FINDINGS counts only the ones graded valid). Net tile count is
       unchanged at 6 columns.

   QA-044 + QA-039 (2026-06-02):
     - The ``ⓘ`` button opens a prose explainer popover
       (``kpi-info-popover``) in sentence-case body text with no
       ``text-transform: uppercase`` and reduced letter-spacing.

   QA-062 (2026-06-03):
     - Hover data-table popovers were removed from every tile EXCEPT
       FINDINGS, where the per-severity breakdown is the actual signal
       (Critical / High / Medium / Low / Total). The other tiles relied on
       fabricated phase splits or restated the value already on the tile;
       the prose ⓘ explainer is the single source of detail.

   QA-061 (2026-06-03):
     - AIVSS tile is now the same plain-text treatment as the BAND tile
       (big numeric + small band label). Reverses the QA-040/QA-049
       horseshoe gauge; the gauge restated information already carried by
       the band pill, so the dependency-free SVG is no longer worth its
       layout cost.

   Each tile reads from the existing shared payload — Executive does NOT
   introduce new KPI fields. Anywhere the value can be live-updated by the
   SSE patcher we mark it with ``data-live``.

   Icons are inline SVG (Lucide paths, MIT-licensed) so they render on first
   paint with no JS race window and add ~1.5 KB total vs ~50 KB for a CDN.
#}
{% macro kpi_info(key) -%}
  <button type="button"
          class="exec-kpi__info kpi-info-icon"
          data-kpi-info-key="{{ key }}"
          aria-expanded="false"
          aria-controls="kpi-{{ key }}-info"
          aria-label="About this metric">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
  </button>
  <span class="exec-kpi__info-popover kpi-info-popover"
        id="kpi-{{ key }}-info"
        role="tooltip"
        hidden>{{ kpi_descriptions[key] }}</span>
{%- endmacro %}
{% macro kpi_hover_table(key) -%}
  {% set _rows = kpi_hover_tables.get(key) if kpi_hover_tables else None %}
  {% if _rows %}
    <div class="exec-kpi__hover-table"
         data-component="kpi-hover-table"
         role="tooltip"
         aria-label="{{ key }} breakdown">
      <table class="exec-kpi-hover-table">
        <tbody>
          {% for row in _rows %}
            <tr class="exec-kpi-hover-table__row{% if row.get('class') %} exec-kpi-hover-table__row--{{ row['class'] }}{% endif %}">
              <th scope="row">{{ row['label'] }}</th>
              <td>{{ row['value'] }}</td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  {% endif %}
{%- endmacro %}
<section class="exec-kpi-strip" aria-label="Scan key metrics">

  <div class="exec-kpi" data-kpi="aivss">
    <span class="exec-kpi__label">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 13c0 5-3.5 7.5-8 9-4.5-1.5-8-4-8-9V5l8-3 8 3v8z"/><path d="m9 12 2 2 4-4"/></svg>
      AIVSS
      {{ kpi_info('aivss') }}
    </span>
    {# QA-061 (2026-06-03) — AIVSS tile is now the same plain-text treatment as
       the BAND tile: big numeric score + small band label. Reverses the
       QA-040/QA-049 horseshoe gauge (the gauge restated information already
       carried by the band pill, and the centre-anchored numeric was the
       primary scan signal anyway). #}
    <span class="exec-kpi__value exec-kpi__value--{{ band_class }}" data-live="aivss">{{ aivss_label }}</span>
    {# SSE Phase 1, Step 4 — this band label is the AIVSS tile's
       sub-caption. QA-065 (2026-06-04) removed the standalone BAND tile, so
       this is now the only on-dashboard surface for the band; the snapshot
       patcher targets it via the distinct ``data-live="band-sub"`` key. #}
    <span class="exec-kpi__sub exec-kpi__sub--{{ band_class }}" data-live="band-sub">{{ band_label }}</span>
  </div>

  <div class="exec-kpi" data-kpi="findings">
    <span class="exec-kpi__label">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg>
      Findings
      {{ kpi_info('findings') }}
    </span>
    <span class="exec-kpi__value" data-live="findings-total">{{ findings_total }}</span>
    {# Mini-chart: 4-segment stacked horizontal bar coloured by severity.
       Risk callout: clamp non-zero segments to ≥ 1 px so a 1-critical-vs-20-high
       scan still shows the critical sliver. #}
    {% set _mix = kpi_chart_data.severity_mix %}
    {% set _mix_total = (_mix.critical | int) + (_mix.high | int) + (_mix.medium | int) + (_mix.low | int) %}
    <span class="exec-kpi__chart exec-kpi__chart--findings" data-component="kpi-chart-findings" aria-hidden="true">
      {% for sev in ['critical', 'high', 'medium', 'low'] %}
        {% set _n = _mix[sev] | int %}
        {% if _mix_total > 0 and _n > 0 %}
          <span class="exec-kpi__mix-seg exec-kpi__mix-seg--{{ sev }}"
                style="flex: {{ _n }} 1 0; min-width: 2px;"></span>
        {% endif %}
      {% endfor %}
      {% if _mix_total == 0 %}
        <span class="exec-kpi__mix-empty"></span>
      {% endif %}
    </span>
    {{ kpi_hover_table('findings') }}
  </div>

  {# QA-066 (2026-06-04) — PROBES tile. "How many probes did we actually run."
     FINDINGS counts the exploit attempts the evaluator graded valid; PROBES
     counts every attempt dispatched, so the two read as numerator / universe.
     Plain-text treatment (big count + agent sub-caption) mirrors the AIVSS
     tile rather than carrying a mini-chart, since the raw count has no
     meaningful denominator to chart against. #}
  <div class="exec-kpi" data-kpi="probes">
    <span class="exec-kpi__label">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><line x1="22" y1="12" x2="18" y2="12"/><line x1="6" y1="12" x2="2" y2="12"/><line x1="12" y1="6" x2="12" y2="2"/><line x1="12" y1="22" x2="12" y2="18"/></svg>
      Probes
      {{ kpi_info('probes') }}
    </span>
    <span class="exec-kpi__value" data-live="probes-count">{{ probes_executed }}</span>
    <span class="exec-kpi__sub" data-live="probes-agents">{{ probes_agents_label }}</span>
  </div>

  {# QA-043 — CRITICAL + HIGH tiles removed (2026-06-02).
     The severity breakdown lives in the Findings-by-severity bar chart
     further down the Overview pane; restating it here as standalone KPI
     tiles duplicated the information without adding new signal. The strip
     renders 6 columns at >=1280px (see ``executive.css`` §3): QA-065 dropped
     the BAND tile and QA-066 added PROBES, a net wash.
  #}

  <div class="exec-kpi" data-kpi="elapsed">
    <span class="exec-kpi__label">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
      Elapsed
      {{ kpi_info('elapsed') }}
    </span>
    <span class="exec-kpi__value" data-live="elapsed">{{ elapsed_label }}</span>
    {# Mini-chart: progress bar OR "no cap" indicator. #}
    <span class="exec-kpi__chart exec-kpi__chart--progress" data-component="kpi-chart-elapsed" aria-hidden="true">
      {% if kpi_chart_data.elapsed_uncapped %}
        <span class="exec-kpi__nocap">no cap</span>
      {% else %}
        <span class="exec-kpi__progress-track">
          <span class="exec-kpi__progress-fill" style="width: {{ kpi_chart_data.elapsed_pct }}%;"></span>
        </span>
      {% endif %}
    </span>
  </div>

  <div class="exec-kpi" data-kpi="cost">
    <span class="exec-kpi__label">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
      Cost
      {{ kpi_info('cost') }}
    </span>
    <span class="exec-kpi__value" data-live="usd">{{ usd_label }}</span>
    <span class="exec-kpi__chart exec-kpi__chart--progress" data-component="kpi-chart-cost" aria-hidden="true">
      {% if kpi_chart_data.cost_uncapped %}
        <span class="exec-kpi__nocap">no cap</span>
      {% else %}
        <span class="exec-kpi__progress-track">
          <span class="exec-kpi__progress-fill" style="width: {{ kpi_chart_data.cost_pct }}%;"></span>
        </span>
      {% endif %}
    </span>
  </div>

  <div class="exec-kpi" data-kpi="coverage">
    <span class="exec-kpi__label">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/></svg>
      Coverage
      {{ kpi_info('coverage') }}
    </span>
    {# SSE Phase 2 follow-up — COVERAGE tile is now live. ``data-live="asi-covered"``
       matches the key in ``live_snapshot`` (dashboard_view.py), so the snapshot
       patcher updates it like the AIVSS / FINDINGS tiles as new ASI categories
       gain findings mid-scan. The rendered text matches the snapshot's
       ``"N / 10"`` shape exactly so the first patch is a no-op (no flicker). #}
    <span class="exec-kpi__value" data-live="asi-covered">{{ asi_covered }} / 10</span>
    {# Mini-chart: 10-segment pip row, filled cells = covered ASI categories. #}
    {% set _covered = kpi_chart_data.coverage_covered | int %}
    <span class="exec-kpi__chart exec-kpi__chart--coverage" data-component="kpi-chart-coverage" aria-hidden="true">
      {% for i in range(10) %}
        <span class="exec-kpi__cov-cell{% if i < _covered %} exec-kpi__cov-cell--on{% endif %}"></span>
      {% endfor %}
    </span>
  </div>

</section>