{% extends "layout.html" %}

{% block content %}
<section class="ui-shell">
  <div class="ui-page-header">
    <div class="flex flex-wrap items-start justify-between gap-3">
      <div>
        <h1 class="ui-page-title mt-0">Cost Analysis</h1>
      </div>
    </div>
  </div>

  <div class="mt-6">
    {% include "dashboard/_cost_summary.html" %}
  </div>

  <div class="mt-6 mb-4 ui-surface p-4">
    {% include "cost_analysis/_filter_controls.html" %}
  </div>

  <div class="mt-4">
    {% include "dashboard/_cost_drivers.html" %}
  </div>
</section>
{% endblock %}