{% extends "base.html" %}
{% block title %}Dashboard — AIRiskGuard Gateway{% endblock %}
{% block content %}

<div class="mb-8 flex items-center justify-between">
    <div>
        <h1 class="text-2xl font-bold text-white mb-1">Dashboard</h1>
        <p class="text-sm" style="color:#7d8fa8">Last 30 days · auto-refreshes every 60s</p>
    </div>
    <span class="text-xs px-3 py-1 rounded-full border" style="color:#00d4ff;border-color:rgba(0,212,255,0.3);background:rgba(0,212,255,0.05)">
        ● Live
    </span>
</div>

<!-- Cost overview cards -->
<div id="cost-cards"
     hx-get="/dashboard/costs"
     hx-trigger="every 60s"
     hx-swap="outerHTML"
     class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
    {% include "cost_cards.html" %}
</div>

<!-- Spend by model -->
<div class="card p-6 mb-6">
    <h2 class="font-semibold text-white mb-4 flex items-center gap-2">
        <span style="color:#00d4ff">▸</span> Spend by Model
        <span class="text-xs font-normal ml-auto" style="color:#7d8fa8">last 30 days</span>
    </h2>
    {% if cost_data.by_model %}
        <div class="space-y-3">
            {% for row in cost_data.by_model %}
            <div>
                <div class="flex items-center justify-between mb-1">
                    <span class="text-sm font-mono text-white">{{ row.model[:40] }}</span>
                    <div class="text-right">
                        <span class="text-sm font-semibold" style="color:#00d4ff">${{ "%.4f"|format(row.cost_usd) }}</span>
                        <span class="text-xs ml-2" style="color:#7d8fa8">{{ row.requests }} req</span>
                    </div>
                </div>
                <div class="w-full rounded-full h-1.5" style="background:rgba(255,255,255,0.06)">
                    <div class="h-1.5 rounded-full" style="width:{{ row.pct }}%;background:linear-gradient(90deg,#00d4ff,#7c3aed)"></div>
                </div>
            </div>
            {% endfor %}
        </div>
    {% else %}
        <p class="text-sm text-center py-6" style="color:#7d8fa8">No cost data yet — make some AI API calls through the gateway.</p>
    {% endif %}
</div>

<!-- Recent events -->
<div class="card p-6">
    <div class="flex items-center justify-between mb-4">
        <h2 class="font-semibold text-white flex items-center gap-2">
            <span style="color:#00d4ff">▸</span> Recent Events
        </h2>
        <div class="flex gap-2 text-xs">
            <button hx-get="/dashboard/violations" hx-target="#events-table" hx-swap="innerHTML"
                    class="px-3 py-1 rounded-full border transition-colors"
                    style="border-color:rgba(0,212,255,0.3);color:#00d4ff">All</button>
            <button hx-get="/dashboard/violations?action=blocked" hx-target="#events-table" hx-swap="innerHTML"
                    class="px-3 py-1 rounded-full border transition-colors"
                    style="border-color:rgba(239,68,68,0.3);color:#f87171">Blocked</button>
            <button hx-get="/dashboard/violations?routed=1" hx-target="#events-table" hx-swap="innerHTML"
                    class="px-3 py-1 rounded-full border transition-colors"
                    style="border-color:rgba(124,58,237,0.3);color:#a78bfa">Routed</button>
        </div>
    </div>
    <div id="events-table"
         hx-get="/dashboard/violations"
         hx-trigger="every 30s"
         hx-swap="innerHTML">
        {% include "violations.html" %}
    </div>
</div>

{% endblock %}