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

{# Vanilla-JS multi-node page: htmx/SSE/ApexCharts are dead weight here #}
{% block vendors %}{% endblock %}

{% block head %}
<link rel="stylesheet" href="/static/multinode.css?v=1.1.1">
{% endblock %}

{% block content %}
<div class="page-header">
    <h2>Dashboard</h2>
    <p>Every node of the fleet, in detail — actions live in the Fleet cockpit</p>
</div>

<div id="mn-root" data-mn-page="dashboard">
    <div class="mn-ribbon" id="mn-ribbon" hidden></div>
    <div class="mn-chipbar" id="mn-chips" hidden></div>
    <div class="mn-grid" id="mn-grid">
        <div class="mn-empty">Polling fleet…</div>
    </div>
</div>

<!-- Last benchmark (local hub DB — server-rendered) -->
{% 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">TTFT Client</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">
                        {% if data.avg_ttft_client_ms is defined and data.avg_ttft_client_ms > 0 and (data.avg_ttft_client_ms - data.avg_ttft_ms) | abs > 10 %}
                        {{ data.avg_ttft_client_ms | format_number(0) }} ms
                        {% else %}
                        —
                        {% endif %}
                    </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 %}

{% block scripts %}
<script src="/static/multinode.js?v=1.1.1"></script>
{% endblock %}