{% extends "base.html" %}
{% block title %}Budget — Hive Corp{% endblock %}

{% block extra_head %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js"></script>
{% endblock %}

{% block content %}
<h1 class="text-2xl font-bold mb-6">Token Budget</h1>

<div hx-get="/partials/budget-stats"
     hx-trigger="load, every 60s"
     hx-swap="innerHTML">
  {% include "partials/budget_stats.html" %}
</div>

<!-- Charts -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mt-6">
  <div class="card bg-base-100 shadow-sm">
    <div class="card-body">
      <h3 class="card-title text-sm">Cost by Agent</h3>
      <canvas id="agent-chart"></canvas>
    </div>
  </div>
  <div class="card bg-base-100 shadow-sm">
    <div class="card-body">
      <h3 class="card-title text-sm">Cost by Model</h3>
      <canvas id="model-chart"></canvas>
    </div>
  </div>
</div>

<script>
  const chartData = {{ chart_data_json | safe }};
</script>
<script src="/static/js/charts.js"></script>
{% endblock %}