{# Vendored from opportunities/_summary_cards.html. Same two-card
   local-runtime grid, same classes, same chip patterns. Only deltas
   are the labels and the data variables — cost → slot, opportunity
   count → failed-execution count. The cloud-only Savings cards stay
   gated behind ``local_runtime_mode`` so audit shows two cards. #}
<div id="explorer-summary" class="ui-summary-grid{% if local_runtime_mode %} audit-summary-grid-local{% endif %}"{% if not local_runtime_mode %} style="grid-template-columns: repeat(5, minmax(0, 1fr));"{% endif %}>
  <div class="ui-summary-card">
    <div class="flex items-start justify-between gap-3">
      <div>
        <p class="ui-card-label">Failed Executions</p>
        <p class="ui-summary-value">{{ summary.active_count }}</p>
      </div>
    </div>
    <div class="ui-summary-band">
      <span class="ui-summary-subvalue">{{ summary.with_solutions_count }} unique quer{{ "ies" if summary.with_solutions_count != 1 else "y" }}</span>
      {% if summary.suggestions_available_count > 0 %}
      <span class="ui-summary-subvalue">·</span>
      <span class="ui-summary-subvalue text-emerald-600 dark:text-emerald-400">
        {{ summary.suggestions_available_count }} with suggestions
      </span>
      {% endif %}
    </div>
  </div>

  <div class="ui-summary-card">
    <div class="flex items-start justify-between gap-3">
      <div>
        <div class="flex items-center gap-2">
          <p class="ui-card-label">Slot Wasted</p>
          <details class="ui-help">
            <summary class="ui-help-button" aria-label="Slot wasted info">!</summary>
            <div class="ui-help-panel ui-help-panel-left">
              Sum of <code class="text-sm bg-slate-100 dark:bg-slate-700 px-1 rounded">total_slot_ms</code> across every failed execution — reservation time these queries consumed before erroring.
            </div>
          </details>
        </div>
        <p class="ui-summary-value">{{ summary.total_slot_human }}</p>
      </div>
    </div>
    <div class="ui-summary-band">
      {% if summary.top_reason %}
      {# KPI is prose only — sentence-cased reason reads cleanly in
         running text. The raw camelCase code is still visible in the
         table's REASON column and in the Reason filter dropdown for
         greppability against Google's docs. Tooltip carries the
         curated description so hovering the KPI explains what the
         reason actually means. #}
      <span class="ui-summary-subvalue" title="{{ summary.top_reason | bq_reason_description }}">
        Top reason: {{ summary.top_reason | bq_reason_humanize }}
      </span>
      {% else %}
      <span class="ui-summary-subvalue">summed across every failed execution</span>
      {% endif %}
    </div>
  </div>
</div>