{# Vendored from packages/web/src/governor_web/templates/opportunities/_summary_cards.html
   and adapted for audit (which is single-tenant + no solutions / shadow /
   PR pipeline). Same ui-summary-grid + ui-summary-card grammar; the
   cloud's local_runtime_mode = True branch covers audit's reduced shape
   (3 cards instead of 5). #}
{% set coverage_pct = ((summary.with_solutions_count / summary.active_count) * 100) if summary.active_count else 0 %}

<div id="explorer-summary" class="ui-summary-grid" style="grid-template-columns: repeat({% if local_runtime_mode %}3{% else %}5{% endif %}, minmax(0, 1fr));">
  <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">Active Opportunities</p>
          <details class="ui-help">
            <summary class="ui-help-button" aria-label="Active opportunities info">!</summary>
            <div class="ui-help-panel ui-help-panel-left">
              Current backlog across the project + rule types visible in this workspace.
            </div>
          </details>
        </div>
        <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 }} ready</span>
      <span class="ui-summary-subvalue">·</span>
      <span class="ui-summary-subvalue">{{ "%.0f"|format(coverage_pct) }}% coverage</span>
      {% if summary.clearing_count > 0 %}
      <span class="ui-summary-subvalue">·</span>
      <span class="ui-summary-subvalue text-amber-600 dark:text-amber-300">
        {{ summary.clearing_count }} under evaluation
      </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">Query Cost</p>
          <details class="ui-help">
            <summary class="ui-help-button" aria-label="Query cost info">!</summary>
            <div class="ui-help-panel ui-help-panel-left">
              Latest visible cost basis for each row, using latest job data or dry-run baseline when available.
            </div>
          </details>
        </div>
        <p class="ui-summary-value">{{ summary.total_query_cost | format_usd }}</p>
      </div>
    </div>
    <div class="ui-summary-band">
      {% set query_breakdown = [] %}
      {% if summary.build_query_cost %}{% set _ = query_breakdown.append('Build ' ~ (summary.build_query_cost | format_usd)) %}{% endif %}
      {% if summary.consumption_query_cost %}{% set _ = query_breakdown.append('Consumption ' ~ (summary.consumption_query_cost | format_usd)) %}{% endif %}
      {% if summary.other_query_cost %}{% set _ = query_breakdown.append('Query ' ~ (summary.other_query_cost | format_usd)) %}{% endif %}
      {% if query_breakdown %}
      <span class="ui-summary-subvalue">{{ query_breakdown | join(' · ') }}</span>
      {% else %}
      <span class="ui-summary-subvalue">Per run</span>
      {% endif %}
    </div>
  </div>

  {% if not local_runtime_mode %}
  <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">Estimated Savings</p>
          <details class="ui-help">
            <summary class="ui-help-button" aria-label="Estimated savings info">!</summary>
            <div class="ui-help-panel ui-help-panel-left">
              Estimated per-run savings for the visible rows, using the latest execution basis for each row.
            </div>
          </details>
        </div>
        <p class="ui-summary-value text-amber-600 dark:text-amber-300">{{ summary.total_possible_savings | format_usd }}</p>
      </div>
    </div>
    <div class="ui-summary-band">
      {% if summary.total_query_cost > 0 and summary.total_possible_savings > 0 %}
      <span class="ui-summary-subvalue">{{ "%.0f" | format(summary.total_possible_savings | float / summary.total_query_cost | float * 100) }}% of visible query cost</span>
      {% else %}
      <span class="ui-summary-subvalue">Per run</span>
      {% endif %}
    </div>
  </div>
  {% endif %}

  <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">Projected Savings</p>
          <details class="ui-help">
            <summary class="ui-help-button" aria-label="Projected savings info">!</summary>
            <div class="ui-help-panel ui-help-panel-left">
              Net savings projected from detection-rule heuristics across the visible rows.
            </div>
          </details>
        </div>
        <p class="ui-summary-value text-brand-700 dark:text-brand-200">{{ summary.total_savings | format_usd }}</p>
      </div>
    </div>
    <div class="ui-summary-band">
      {% set savings_breakdown = [] %}
      {% if summary.build_possible_savings %}{% set _ = savings_breakdown.append('Build ' ~ (summary.build_possible_savings | format_usd)) %}{% endif %}
      {% if summary.consumption_possible_savings %}{% set _ = savings_breakdown.append('Consumption ' ~ (summary.consumption_possible_savings | format_usd)) %}{% endif %}
      {% if summary.other_possible_savings %}{% set _ = savings_breakdown.append('Query ' ~ (summary.other_possible_savings | format_usd)) %}{% endif %}
      {% if summary.total_query_cost > 0 and summary.total_savings > 0 %}
      <span class="ui-summary-subvalue">{{ "%.0f" | format(summary.total_savings | float / summary.total_query_cost | float * 100) }}% of visible query cost</span>
      {% else %}
      {% if savings_breakdown %}
      <span class="ui-summary-subvalue">{{ savings_breakdown | join(' · ') }}</span>
      {% else %}
      <span class="ui-summary-subvalue">Dry-run</span>
      {% endif %}
      {% endif %}
    </div>
  </div>

  {% if not local_runtime_mode %}
  <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">Clearing Savings</p>
          <details class="ui-help">
            <summary class="ui-help-button" aria-label="Clearing savings info">!</summary>
            <div class="ui-help-panel ui-help-panel-right">
              Expected savings from opportunities currently in clearing state — fixes applied, waiting for cost data to settle.
            </div>
          </details>
        </div>
        <p class="ui-summary-value text-emerald-600 dark:text-emerald-400">{{ summary.clearing_savings | default(0) | format_usd }}</p>
      </div>
    </div>
    <div class="ui-summary-band">
      {% if summary.clearing_count > 0 %}
      <span class="ui-summary-subvalue">{{ summary.clearing_count }} settling</span>
      {% else %}
      <span class="ui-summary-subvalue">no clearing opportunities</span>
      {% endif %}
    </div>
  </div>
  {% endif %}
</div>