{% extends "base.html" %}
{% block title %}asiai — Dashboard{% endblock %}

{% block content %}
<div class="page-header">
    <h2>Dashboard</h2>
    <p>System overview and inference engines status</p>
</div>

<!-- System metrics -->
<div class="card-grid fade-in">
    {% include "partials/system_card.html" %}
    {% include "partials/engines_card.html" %}
</div>

<!-- Models table -->
<div class="mt-6 fade-in-delay-1">
    {% include "partials/models_table.html" %}
</div>

<!-- Last benchmark -->
{% if last_bench and last_bench.engines %}
<div class="mt-6 fade-in-delay-2">
    <div class="card card-accent">
        <h3 class="card-title">Last Benchmark</h3>
        {% if last_bench.winner and last_bench.engines.get(last_bench.winner.name) %}
        {% set winner_data = last_bench.engines[last_bench.winner.name] %}
        <div style="margin-bottom: 1.5rem;">
            <div class="hero-number glow">{{ winner_data.avg_tok_s | format_number }}<span class="hero-unit">tok/s</span></div>
            <div class="hero-subtitle"><span class="accent">{{ last_bench.winner.name }}</span> · {{ last_bench.winner.tok_s_delta }}</div>
        </div>
        {% endif %}
        <div class="overflow-x-auto">
        <table class="results-table">
            <thead>
                <tr>
                    <th class="text-left">Engine</th>
                    <th class="text-right">tok/s</th>
                    <th class="text-right">TTFT</th>
                    <th class="text-right">VRAM</th>
                    <th class="text-right">Stability</th>
                </tr>
            </thead>
            <tbody>
                {% for name, data in last_bench.engines.items() %}
                <tr class="{% if last_bench.winner and last_bench.winner.name == name %}winner-row{% endif %}">
                    <td class="font-medium" style="font-family: var(--font-sans);">{{ name }}</td>
                    <td class="text-right">{{ data.avg_tok_s | format_number }}</td>
                    <td class="text-right">{{ data.avg_ttft_ms | format_number(0) }} ms</td>
                    <td class="text-right">{{ data.vram_bytes | format_bytes }}</td>
                    <td class="text-right">
                        {% if data.stability == 'stable' %}
                        <span class="badge badge-green">stable</span>
                        {% elif data.stability == 'variable' %}
                        <span class="badge badge-yellow">variable</span>
                        {% elif data.stability == 'unstable' %}
                        <span class="badge badge-red">unstable</span>
                        {% else %}
                        <span class="badge badge-gray">{{ data.stability or '—' }}</span>
                        {% endif %}
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
        </div>
    </div>
</div>
{% endif %}

<!-- Quick actions -->
<div class="quick-actions fade-in-delay-3">
    <a href="/bench" class="btn btn-primary">Run Benchmark</a>
    <a href="/doctor" class="btn">Run Doctor</a>
    <a href="/monitor" class="btn">Live Monitor</a>
</div>
{% endblock %}