{% extends "base.html" %}
{% block title %}Dashboard -- Clio Visualizer{% endblock %}

{% block content %}
<h1>Runtime Dashboard</h1>

<div class="card-grid">
    <div class="card">
        <div class="card-label">Workers</div>
        <div class="card-value" id="card-workers">--</div>
    </div>
    <div class="card">
        <div class="card-label">Queued</div>
        <div class="card-value" id="card-queued">--</div>
    </div>
    <div class="card">
        <div class="card-label">Blocked</div>
        <div class="card-value" id="card-blocked">--</div>
    </div>
    <div class="card">
        <div class="card-label">Processed</div>
        <div class="card-value" id="card-processed">--</div>
    </div>
</div>

<div class="chart-container">
    <h2>Worker Load</h2>
    <canvas id="workerChart"></canvas>
</div>

<div class="table-container">
    <h2>Worker Details</h2>
    <table id="workerTable">
        <thead>
            <tr>
                <th>Worker</th>
                <th>Queued</th>
                <th>Blocked</th>
                <th>Processed</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='js/dashboard.js') }}"></script>
{% endblock %}