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

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

<div class="grid grid-cols-2 md:grid-cols-5 gap-4 mb-8">
    <div class="bg-white rounded-lg border border-cream-200 p-4">
        <div class="text-sm text-gray-400">Uptime</div>
        <div id="v-uptime" class="text-2xl font-mono text-ink-700">{{ "%.0f"|format(uptime // 60) }}m {{ "%.0f"|format(uptime % 60) }}s</div>
    </div>
    <div class="bg-white rounded-lg border border-cream-200 p-4">
        <div class="text-sm text-gray-400">Partitions</div>
        <div id="v-partitions" class="text-2xl font-mono text-ink-700">{{ partition_count }}</div>
    </div>
    <div class="bg-white rounded-lg border border-cream-200 p-4">
        <div class="text-sm text-gray-400">Executor Pool</div>
        <div id="v-pool" class="text-2xl font-mono text-ink-700">{{ pool_active }} / {{ pool_max }}</div>
    </div>
    <div class="bg-white rounded-lg border border-cream-200 p-4">
        <div class="text-sm text-gray-400">Total Events</div>
        <div id="v-events" class="text-2xl font-mono text-ink-700">{{ stats.total_events or 0 }}</div>
    </div>
    <div class="bg-white rounded-lg border border-cream-200 p-4">
        <div class="text-sm text-gray-400">Consumer Lag</div>
        <div id="v-lag" class="text-2xl font-mono {% if total_lag > 100 %}text-red-600{% elif total_lag > 20 %}text-amber-600{% else %}text-emerald-600{% endif %}">{{ total_lag }}</div>
    </div>
</div>

<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
    <div class="bg-white rounded-lg border border-cream-200 p-4">
        <div class="text-sm text-gray-400">Consumed</div>
        <div id="v-consumed" class="text-xl font-mono text-blue-600">{{ stats.consumed or 0 }}</div>
    </div>
    <div class="bg-white rounded-lg border border-cream-200 p-4">
        <div class="text-sm text-gray-400">Completed</div>
        <div id="v-completed" class="text-xl font-mono text-emerald-600">{{ stats.completed or 0 }}</div>
    </div>
    <div class="bg-white rounded-lg border border-cream-200 p-4">
        <div class="text-sm text-gray-400">Failed</div>
        <div id="v-failed" class="text-xl font-mono text-red-600">{{ stats.failed or 0 }}</div>
    </div>
    <div class="bg-white rounded-lg border border-cream-200 p-4">
        <div class="text-sm text-gray-400">Produced</div>
        <div id="v-produced" class="text-xl font-mono text-purple-600">{{ stats.produced or 0 }}</div>
    </div>
</div>

<h2 class="text-lg font-semibold mb-3 text-ink-800">Assigned Partitions</h2>
<div id="v-partition-tiles" class="flex flex-wrap gap-2 mb-6">
    {% for pid in partitions %}
    <a href="/partitions/{{ pid }}" class="bg-white hover:bg-cream-100 rounded-lg border border-cream-200 p-3 text-center" style="min-width:56px;">
        <div class="text-lg font-mono font-bold text-teal-600">P{{ pid }}</div>
    </a>
    {% endfor %}
    {% if not partitions %}
    <div class="text-gray-400 text-center py-4 w-full">No partitions assigned</div>
    {% endif %}
</div>
{% endblock %}