{% extends 'admin/admin_base.html' %}
{% block title %}Дашборды{% endblock %}
{% block breadcrumb %}
{{ super() }}
<li class="breadcrumb-item active">Мониторинг</li>
{% endblock %}
{% block admin_content %}
<div class="admin-toolbar">
    <div class="admin-toolbar__main">
        <h1 class="admin-toolbar__title"><i class="bi bi-graph-up" aria-hidden="true"></i> Дашборды мониторинга</h1>
        <p class="admin-toolbar__meta muted">Визуализация метрик в реальном времени</p>
    </div>
    <div class="admin-toolbar__actions">
        <button type="button" class="btn primary btn-sm" onclick="loadMetrics()">
            <i class="bi bi-arrow-clockwise" aria-hidden="true"></i> Обновить
        </button>
        <button type="button" class="btn secondary btn-sm" onclick="exportMetrics()">
            <i class="bi bi-download" aria-hidden="true"></i> Экспорт
        </button>
    </div>
</div>

<div class="stats-grid mb-4">
    <article class="card stat-card">
        <h3>CPU</h3>
        <strong id="monitorCpuValue">—</strong>
        <span class="tag info">%</span>
    </article>
    <article class="card stat-card">
        <h3>Память</h3>
        <strong id="monitorMemValue">—</strong>
        <span class="tag info">%</span>
    </article>
    <article class="card stat-card">
        <h3>Throughput</h3>
        <strong id="monitorRpsValue">—</strong>
        <span class="tag warning">RPS</span>
    </article>
    <article class="card stat-card">
        <h3>Сеть</h3>
        <strong id="monitorNetValue">—</strong>
        <span class="tag">I/O</span>
    </article>
</div>

<article class="admin-card card mb-4">
    <div class="toolbar">
        <h3 class="mb-0">Параметры графиков</h3>
        <div class="toolbar-controls">
            <label class="checkbox-inline">
                <span class="muted">Диапазон:</span>
                <select class="form-select form-select-sm" id="timeRange" onchange="updateTimeRange()">
                    <option value="1h">Последний час</option>
                    <option value="6h">Последние 6 часов</option>
                    <option value="24h" selected>Последние 24 часа</option>
                    <option value="7d">Последние 7 дней</option>
                </select>
            </label>
            <select class="form-select form-select-sm" id="metricSelect" multiple onchange="loadMetrics()" aria-label="Метрики">
                <option value="cpu_usage_percent" selected>CPU (%)</option>
                <option value="memory_usage_percent" selected>Память (%)</option>
                <option value="request_throughput">Throughput (RPS)</option>
                <option value="network_bytes_sent">Сеть (отправлено)</option>
                <option value="network_bytes_recv">Сеть (получено)</option>
            </select>
        </div>
    </div>
</article>

<div class="grid-two">
    <article class="admin-card card">
        <h3>CPU Usage (%)</h3>
        <div class="chart-placeholder">
            <canvas id="cpuChart"></canvas>
        </div>
    </article>
    <article class="admin-card card">
        <h3>Memory Usage (%)</h3>
        <div class="chart-placeholder">
            <canvas id="memoryChart"></canvas>
        </div>
    </article>
    <article class="admin-card card">
        <h3>Request Throughput (RPS)</h3>
        <div class="chart-placeholder">
            <canvas id="throughputChart"></canvas>
        </div>
    </article>
    <article class="admin-card card">
        <h3>Network I/O</h3>
        <div class="chart-placeholder">
            <canvas id="networkChart"></canvas>
        </div>
    </article>
</div>
{% endblock %}

{% block admin_scripts %}
<script src="{{ url_for('static', filename='js/chart.umd.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/dashboards.js') }}"></script>
{% endblock %}