{% extends "base.html" %}
{% block title %}Dashboard — UPS{% endblock %}
{% block head_extra %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
{% endblock %}
{% block content %}
<section class="dashboard-header" aria-labelledby="dashboard-title">
  <div>
    <p class="eyebrow">Live fleet status</p>
    <h1 id="dashboard-title">Power continuity dashboard</h1>
  </div>
  <div class="dashboard-clock" aria-live="polite">
    <span class="pulse-dot" aria-hidden="true"></span>
    <span id="dashboard-sync-state">Waiting for UPS telemetry</span>
  </div>
</section>

<section class="fleet-overview" id="fleet-overview">
  <div class="fleet-card">
    <div class="fleet-stat">
      <span class="fleet-stat-label">Total UPS</span>
      <span class="fleet-stat-value" id="fleet-total">-</span>
    </div>
    <div class="fleet-stat"><span class="fleet-stat-label">Online</span><span class="fleet-stat-value online" id="fleet-online">-</span></div>
    <div class="fleet-stat"><span class="fleet-stat-label">On Battery</span><span class="fleet-stat-value onbatt" id="fleet-onbatt">-</span></div>
    <div class="fleet-stat"><span class="fleet-stat-label">Offline</span><span class="fleet-stat-value offline" id="fleet-offline">-</span></div>
    <div class="fleet-stat"><span class="fleet-stat-label">Total Load (W)</span><span class="fleet-stat-value" id="fleet-watts">-</span></div>
    <div class="fleet-stat"><span class="fleet-stat-label">Min Runtime</span><span class="fleet-stat-value" id="fleet-min-runtime">-</span></div>
  </div>
</section>

<div id="ups-cards" data-ui='{{ ui_cfg | tojson }}'>
  {% for ups in ups_list %}
    <div class="card" id="card-{{ ups.name }}">
      <div class="card-header">
        <h2>
          <span class="state-dot" data-state-dot></span>
          {{ ups.name }}
        </h2>
        <div class="ups-connection" data-field-conn>{{ ups.host }}:{{ ups.port }}</div>
        <button class="reset-layout-btn" data-reset-layout title="Reset tile layout">⟳</button>
      </div>
      <div class="metrics">
        <div class="highline">
          <span class="ups-status unknown" data-field="STATUS">-</span>
          <span class="badge" data-field="RUNTIME_MINUTES" data-badge="runtime">- m</span>
          <span class="badge" data-field="DERIVED_WATTS" data-badge="watts">- W</span>
          <span class="badge" data-field="HEADROOM_PCT" data-badge="headroom">- headroom</span>
        </div>
        <div class="tile-grid" data-tile-grid></div>
      </div>
      <div class="ups-footer" data-ups-footer></div>
    </div>
  {% endfor %}
  {% if not ups_list %}
    <div class="empty-state">
      <h3>No UPS Configured</h3>
      <p>Get started by <a href="/config">adding a UPS configuration</a>.</p>
    </div>
  {% endif %}
</div>
{% endblock %}
{% block scripts %}
<script src="/static/js/dashboard.js?v=6"></script>
{% endblock %}