{# 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>
      <p class="ui-eyebrow">Cost Analytics</p>
      <h1 class="ui-page-title">Dashboard</h1>
      <p class="ui-page-subtitle">
        BigQuery spend analysis for
        <code class="font-mono">{{ config.gcp_project_id }}</code> /
        <code class="font-mono">{{ config.bigquery_region }}</code>
      </p>
    </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>

  {# ── Stat cards ── #}
  {% include "dashboard/_cost_summary.html" %}

  {# ── Main grid: bar chart + cost drivers + active issues ── #}
  <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/_cost_drivers.html" %}
    </div>
    <div class="lg:col-span-2">
      {% include "dashboard/_opportunities_summary.html" %}
    </div>
  </div>
</section>
{% endblock %}