{% extends 'base.html' %}

{% block content %}
<header class="text-center mb-3">
    <h5 class="mb-0">Sieć Trójfazowa / Rokietnica, Gajowa</h5>
    <span class="badge bg-dark border border-secondary text-muted" id="lastUpdate" style="font-size: 0.7rem;">Ładowanie...</span>
</header>

<!-- Gauge Section -->
<div class="gauge-grid mb-1">
    {% for id, phase in phases.items() %}
    <div class="gauge-card">
        <div class="gauge-canvas-container">
            <canvas id="gauge{{ id }}"></canvas>
        </div>
        <div class="gauge-label">{{ phase.label }}</div>
        <div class="voltage-value" id="value{{ id }}">---</div>
    </div>
    {% endfor %}
</div>

<!-- Informacja o normie napięcia -->
<div class="text-center mb-3">
    <span class="badge bg-dark border border-secondary text-muted" style="font-size: 0.65rem; font-weight: 400; opacity: 0.8;">
        Norma PN-EN 50160: <span class="text-success">230V ±10% (207V - 253V)</span>
    </span>
</div>

<!-- Time & Reset Selector -->
<div class="d-flex justify-content-center align-items-center gap-2 mb-3 flex-wrap">
    <div class="d-flex gap-1 align-items-center">
        {% for key, r in time_ranges.items() %}
        <button class="btn btn-sm btn-outline-primary time-btn {% if key == default_range %}active{% endif %}" 
                style="min-width: 45px; height: 31px; display: flex; align-items: center; justify-content: center;"
                data-range="{{ key }}" onclick="changeTimeRange('{{ key }}')">
            {{ key }}
        </button>
        {% endfor %}
    </div>
</div>

<!-- Main Chart -->
<div class="main-chart-card mb-3">
    <canvas id="voltageChart"></canvas>
</div>

<div class="events-card mb-3">
    <div class="d-flex justify-content-between align-items-center mb-2">
        <h6 class="mb-0">Dziennik zdarzeń (zaniki faz)</h6>
        <span id="eventRangeLabel" class="text-muted" style="font-size: 0.75rem;">Ładowanie...</span>
    </div>
    <div id="eventLogContainer">
        <div class="no-events">Ładowanie zdarzeń...</div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="{{ static_v('js/monitor.js') }}"></script>


<script>
    document.addEventListener('DOMContentLoaded', () => {
        initMonitor({{ phases|tojson }}, '{{ default_range }}');
    });
</script>
{% endblock %}