{% extends "base.html" %}
{% block title %}Dashboard – ZMB Webui{% endblock %}
{% block content %}
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem">
  <div>
    <h2 style="margin:0">Dashboard</h2>
    <small style="color:var(--pico-muted-color)">{{ hostname }}</small>
  </div>
  <span class="htmx-indicator" id="spinner">&#9696; aktualisiert...</span>
</div>

<!-- Schnellstatistiken (alle 30s) -->
<div class="grid-stats" id="quick-stats"
     hx-get="/fragments/quick-stats"
     hx-trigger="load, every 30s"
     hx-indicator="#spinner">
  <div class="stat-card"><h3>Lädt...</h3><p class="value">–</p></div>
</div>

<hr>

<!-- Pools -->
<h3>Storage Pools</h3>
<div id="pools"
     hx-get="/fragments/pools"
     hx-trigger="load, every 30s"
     hx-indicator="#spinner">
  <p aria-busy="true">Lade Pools...</p>
</div>

<hr>

<!-- Disk Usage -->
<h3>Disk Usage</h3>
<div id="disk-usage"
     hx-get="/fragments/disk-usage"
     hx-trigger="load"
     hx-indicator="#spinner">
  <p aria-busy="true">Lade...</p>
</div>

<hr>

<!-- Netzwerk -->
<h3>Network Traffic</h3>
<div id="net-traffic"
     hx-get="/fragments/net-traffic"
     hx-trigger="load, every 10s"
     hx-indicator="#spinner">
  <p aria-busy="true">Lade...</p>
</div>

{% endblock %}