{# Audit cost-summary cards - vendored from
   governor_web/templates/dashboard/_cost_summary.html @ 19455c57c5a9.
   Total / Build / Consumption / Flagged / Bytes / Slot in a single
   row of six on wide screens.

   The pre-compiled Tailwind bundle in packages/audit/.../static/css
   only includes grid-cols-1..5; grid-cols-6 was never in the source
   when CSS was built, so we inline the 6-column rule below to avoid
   needing a Tailwind rebuild. Below xl we still use Tailwind's
   built-in 1/2/3 column classes. #}
{% from "components/_stat_card.html" import stat_card %}
<style>
  @media (min-width: 1280px) {
    .audit-stat-row {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }
  }
</style>
<div class="audit-stat-row grid gap-3 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">

  {{ stat_card(
       "Total Spend",
       totals.total_cost_usd | format_usd,
       meta="across " ~ "{:,}".format(totals.total_jobs) ~ " job" ~ ("s" if totals.total_jobs != 1 else "")
  ) }}

  {{ stat_card(
       "Build Spend",
       totals.build_spend | format_usd,
       meta=(("%.0f" | format(totals.build_spend / totals.total_cost_usd * 100)) ~ "% of scanned spend") if (totals.total_cost_usd and totals.build_spend) else "materialising writes",
       accent="brand",
       tooltip='Spend on jobs classified as <code class="text-sm bg-slate-100 dark:bg-slate-700 px-1 rounded">build</code> - queries that materialise data (CTAS, MERGE, INSERT, UPDATE, DELETE). These are your warehouse build costs.'
  ) }}

  {{ stat_card(
       "Consumption Spend",
       totals.consumption_spend | format_usd,
       meta=(("%.0f" | format(totals.consumption_spend / totals.total_cost_usd * 100)) ~ "% of scanned spend") if (totals.total_cost_usd and totals.consumption_spend) else "read-only consumers",
       accent="teal",
       tooltip='Spend on jobs classified as <code class="text-sm bg-slate-100 dark:bg-slate-700 px-1 rounded">consumption</code> - read-only queries from BI tools, ad-hoc analysts, reverse-ETL exports, and other consumers. These read your warehouse without writing to it.'
  ) }}

  {{ stat_card(
       "Flagged Jobs",
       "{:,}".format(pagination.total_items if pagination else 0),
       meta=(("%.0f" | format(pagination.total_items / totals.total_jobs * 100)) ~ "% of scanned jobs") if (totals.total_jobs and pagination and pagination.total_items) else "logical jobs with at least one finding",
       accent="amber",
       tooltip="Number of <em>logical jobs</em> (aggregated by destination_table for builds, by normalized query hash for consumption) where at least one execution fired an issue or suggestion rule. NOT a count of raw executions — one logical job typically aggregates many runs. Each row of the cost-drivers table below is one of these flagged logical jobs."
  ) }}

  {{ stat_card(
       "Bytes Scanned",
       totals.total_bytes_processed | format_bytes,
       meta="processed across " ~ "{:,}".format(totals.total_jobs) ~ " job" ~ ("s" if totals.total_jobs != 1 else ""),
       tooltip='Sum of <code class="text-sm bg-slate-100 dark:bg-slate-700 px-1 rounded">total_bytes_processed</code> across every cached <em>non-failed</em> job (BigQuery generally refunds bytes-billed on failed jobs, so they are excluded here and from every dollar figure on this row). The dollar columns derive from <code class="text-sm bg-slate-100 dark:bg-slate-700 px-1 rounded">total_bytes_billed</code>, which rounds up per query.'
  ) }}

  {{ stat_card(
       "Slot Time",
       (("%.1f" | format(totals.total_slot_hours)) ~ " hrs") if totals.total_slot_hours else "-",
       meta="slot-hours across the scan window",
       tooltip='Sum of <code class="text-sm bg-slate-100 dark:bg-slate-700 px-1 rounded">total_slot_ms</code> across every cached <em>non-failed</em> job (failed jobs are excluded so this matches the dollar figures on this row), converted to slot-hours. Slot time is BigQuery'"'"'s measure of compute work - a query with heavy JOINs / window functions can burn slots without scanning many bytes. Useful as a reservation-sizing signal.'
  ) }}
</div>