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

   Six tiles in a responsive grid; locked left-to-right order:
     AIVSS / Band / Findings / 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-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 and is structurally distinct from the BAND pill below
       (different parent tile, different colour-class binding). The
       ``data-live="band"`` attribute previously collided with the BAND
       pill's writer (critic patch G8/P8); we rename to ``band-sub`` so
       the snapshot patcher can target the two surfaces independently. #}
    <span class="exec-kpi__sub exec-kpi__sub--{{ band_class }}" data-live="band-sub">{{ band_label }}</span>
  </div>

  <div class="exec-kpi" data-kpi="band">
    <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="M12 14 4 6"/><path d="M3.34 19a10 10 0 1 1 17.32 0"/></svg>
      Band
      {{ kpi_info('band') }}
    </span>
    <span class="exec-kpi__value exec-kpi__value--{{ band_class }}" data-live="band">{{ band_label }}</span>
    {# Mini-chart: 5-segment horizontal bar (Critical · Poor · Warning · Good · Excellent). #}
    {% set _seg = kpi_chart_data.band_index | default(-1) %}
    {% set _seg_classes = ['critical', 'poor', 'warning', 'good', 'excellent'] %}
    <span class="exec-kpi__chart exec-kpi__chart--band" data-component="kpi-chart-band" aria-hidden="true">
      {% for cls in _seg_classes %}
        <span class="exec-kpi__band-seg exec-kpi__band-seg--{{ cls }}{% if loop.index0 == _seg %} exec-kpi__band-seg--active{% endif %}"></span>
      {% endfor %}
    </span>
    {# QA-062 (2026-06-03) — hover data-table dropped from every tile except
       FINDINGS; the prose ⓘ explainer remains the single source of detail. #}
  </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-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 grid
     now renders 6 columns at >=1280px (see ``executive.css`` §3).
  #}

  <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>
    <span class="exec-kpi__value">{{ 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>