{# Audit dashboard - adapted from governor_web/templates/dashboard/index.html
   @ 19455c57c5a9. Same layout grammar (ui-shell → ui-page-header → stat
   cards → main grid with cost drivers + active issues panes) so the
   styling matches governor-web 1:1. The audit package's empty-state
   redirect lives at the route level, so this template only renders
   when there is data to show. #}
{% extends "layout.html" %}

{% block content %}
<section class="ui-shell">
  <div class="ui-page-header flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
    <div>
      <h1 class="ui-page-title">Dashboard</h1>
    </div>
    <a href="/admin/configurations" class="text-sm text-brand-500 dark:text-brand-300 hover:underline whitespace-nowrap">Configuration &amp; re-scan &rarr;</a>
  </div>

  {# ── Headline card - single dollar value that answers
     "what is Governor telling me to act on?". flagged_spend is the
     sum of cached job cost across jobs with ≥1 active opportunity,
     deduped by job_id. The "Review opportunities" CTA turns this
     from a passive report into an actionable workflow surface. #}
  {% if totals.flagged_spend and totals.flagged_spend > 0 %}
  <div class="mt-6 border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-6 flex flex-col md:flex-row md:items-center md:justify-between gap-4">
    <div>
      <p class="text-sm font-medium uppercase tracking-wider text-amber-600 dark:text-amber-300">Optimisable spend</p>
      <p class="mt-2 text-4xl font-semibold text-slate-900 dark:text-slate-100">{{ totals.flagged_spend | format_usd }}</p>
      <p class="mt-2 text-sm text-slate-500 dark:text-slate-400">
        {% set _jobs = pagination.total_items if pagination else 0 %}
        Across {{ "{:,}".format(_jobs) }} flagged job{{ "s" if _jobs != 1 else "" }}
        {% if totals.total_cost_usd and totals.flagged_spend %}
        · {{ "%.0f" | format(totals.flagged_spend / totals.total_cost_usd * 100) }}% of scanned spend
        {% endif %}
      </p>
    </div>
    <a href="/opportunities" class="inline-flex items-center gap-2 px-5 py-2.5 bg-brand-500 hover:bg-brand-600 dark:bg-brand-400 dark:hover:bg-brand-300 text-white dark:text-slate-900 text-sm font-semibold rounded-full transition-colors whitespace-nowrap">
      Review issues &amp; suggestions
      <span aria-hidden="true">&rarr;</span>
    </a>
  </div>
  {% endif %}

  {# ── Stat cards (secondary, supporting context to the headline) ── #}
  <div class="mt-4">
  {% include "dashboard/_cost_summary.html" %}
  </div>

  {# ── Main grid: bar chart + cost drivers ──
     The "Active Issues" rule-type breakdown was removed - issues are
     listed (and filterable) on /opportunities, so a duplicate card
     here was just extra scrolling. #}
  <div class="mt-8 grid gap-6 lg:grid-cols-2">
    <div class="lg:col-span-2">
      {% include "dashboard/_trend_chart.html" %}
    </div>
    <div class="lg:col-span-2">
      {% include "dashboard/_origin_breakdown.html" %}
    </div>
    <div class="lg:col-span-2">
      {% include "dashboard/_cost_drivers.html" %}
    </div>
    {# Top Failed Jobs widget removed - failed jobs don't carry direct
       on-demand BigQuery cost (BigQuery refunds bytes-billed on most
       failure modes), and a second 10-row table on the dashboard
       diluted the cost-first narrative. Reliability detail lives on
       /failures (sidebar nav) where it belongs. #}
  </div>
</section>
{% endblock %}