{% extends "base.html" %}

{% block title %}Overview — didiAI Dashboard{% endblock %}

{% block content %}
<div class="mb-8">
    <h1 class="text-2xl font-bold text-white">Overview</h1>
    <p class="mt-1 text-sm text-slate-400">Live status of search providers, LLMs, and recent activity (last 24h)</p>
</div>

<!-- KPI Cards -->
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
    <div class="bg-slate-900 rounded-xl border border-slate-800 p-5">
        <p class="text-xs uppercase tracking-wide text-slate-400">Requests (24h)</p>
        <p class="mt-2 text-3xl font-bold text-white">{{ summary.total }}</p>
        <p class="mt-1 text-xs text-slate-500">
            Free: {{ summary.by_tier.get('free', 0) }} · Premium: {{ summary.by_tier.get('premium', 0) }}
        </p>
    </div>
    <div class="bg-slate-900 rounded-xl border border-slate-800 p-5">
        <p class="text-xs uppercase tracking-wide text-slate-400">Avg Response</p>
        <p class="mt-2 text-3xl font-bold text-white">{{ (summary.avg_duration_ms/1000)|round(1) }}<span class="text-lg text-slate-400">s</span></p>
        <p class="mt-1 text-xs text-slate-500">{{ summary.avg_duration_ms|int }}ms mean</p>
    </div>
    <div class="bg-slate-900 rounded-xl border border-slate-800 p-5">
        <p class="text-xs uppercase tracking-wide text-slate-400">Error Rate</p>
        <p class="mt-2 text-3xl font-bold
            {% if summary.error_rate >= 5 %}text-rose-400{% elif summary.error_rate >= 1 %}text-amber-400{% else %}text-emerald-400{% endif %}">
            {{ summary.error_rate }}%
        </p>
        <p class="mt-1 text-xs text-slate-500">{{ summary.errors }} errors total</p>
    </div>
    <div class="bg-slate-900 rounded-xl border border-slate-800 p-5">
        <p class="text-xs uppercase tracking-wide text-slate-400">Cost (24h)</p>
        <p class="mt-2 text-3xl font-bold text-white">${{ "%.2f"|format(summary.total_cost) }}</p>
        <p class="mt-1 text-xs text-slate-500">estimated</p>
    </div>
</div>

<!-- Provider grid -->
<div class="mb-4 flex items-center justify-between">
    <h2 class="text-lg font-semibold text-white">Providers</h2>
    <button hx-get="/providers" hx-target="body" class="text-xs text-slate-400 hover:text-white">View details →</button>
</div>

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-8">
    {% for provider in providers %}
        {% include "partials/provider_card.html" %}
    {% endfor %}
</div>
{% endblock %}