{% 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">
        {% if local_runtime_mode %}
          Last local dbt execution analysis
        {% else %}
          BigQuery spend analysis for {{ date_range.display }}
        {% endif %}
      </p>
    </div>
    {% if not local_runtime_mode %}
      {% include "dashboard/_date_range_picker.html" %}
    {% endif %}
  </div>

  {% if has_data %}
    {# Cost Summary Section #}
    <div id="cost-summary-section">
      {% include "dashboard/_cost_summary.html" %}
    </div>

    {# Main Content Grid #}
    <div class="mt-8 grid gap-6 lg:grid-cols-2">
      {# Trend Chart #}
      {% if selected_lens != 'storage' %}
        <div id="trend-chart-section" class="lg:col-span-2">
          {% include "dashboard/_trend_chart.html" %}
        </div>
      {% endif %}

      {# Cost Drivers #}
      <div id="cost-drivers-section" class="lg:col-span-2">
        {% include "dashboard/_cost_drivers.html" %}
      </div>

      {# Opportunities Summary #}
      <div id="opportunities-section" class="lg:col-span-2">
        {% include "dashboard/_opportunities_summary.html" %}
      </div>

      {# Usage Statistics #}
      {% if selected_lens != 'storage' %}
        <div id="usage-stats-section" class="lg:col-span-2">
          {% include "dashboard/_usage_stats.html" %}
        </div>
      {% endif %}
    </div>
  {% else %}
    {% include "dashboard/_empty_state.html" %}
  {% endif %}
</section>

<script src="/static/js/dashboard-charts.js?v=20260412a"></script>
{% endblock %}