{% extends "base.html" %}
{% from "_macros.html" import badge, meter with context %}
{% set title = "Dashboard" %}
{% block content %}
<div class="page-head">
  <h1>Dashboard</h1>
  <p class="muted">Ververst automatisch elke 5 seconden.</p>
</div>


<div class="grid" data-live-status="{{ url_for('ui.api_status') }}">
  <section class="card">
    <h2>Kiosk</h2>
    <dl class="kv">
      <dt>Chromium</dt><dd>{{ badge(s.browser.status, s.browser.label, "browser") }}</dd>
      <dt>Kiosk-URL</dt><dd class="break" data-field="url">{{ s.url }}</dd>
      <dt>Verbinding</dt><dd>{{ badge(s.network.status, s.network.label, "network") }}</dd>
      <dt>Herstarts</dt><dd data-field="browser.restarts">{{ s.browser.restarts }}</dd>
    </dl>
    {% if s.last_error %}
    <p class="note">Laatste melding: <span data-field="last_error.message">{{ s.last_error.message }}</span></p>
    {% endif %}
  </section>

  <section class="card">
    <h2>Systeem</h2>
    <dl class="kv">
      <dt>Uptime</dt><dd data-field="uptime">{{ s.uptime }}</dd>
      <dt>CPU-belasting</dt><dd><span data-field="cpu">{{ s.cpu }}</span> <span class="muted">(load <span data-field="load">{{ s.load }}</span>)</span></dd>
      <dt>Temperatuur</dt><dd>{{ badge(s.temperature_status, s.temperature, "temperature") }}</dd>
      {% if s.power %}<dt>Voeding</dt><dd>{{ badge(s.power.status, s.power.label, "power") }}</dd>{% endif %}
    </dl>
  </section>

  <section class="card">
    <h2>Geheugen &amp; opslag</h2>
    <dl class="kv">
      <dt>RAM</dt><dd><span data-field="memory">{{ s.memory }}</span>{{ meter(s.memory_percent, "memory_percent") }}</dd>
      <dt>SD-kaart</dt><dd><span data-field="disk">{{ s.disk }}</span>{{ meter(s.disk_percent, "disk_percent") }}</dd>
    </dl>
  </section>

  <section class="card">
    <h2>Netwerk</h2>
    <dl class="kv">
      <dt>Ethernet</dt><dd data-field="eth0">{{ s.eth0 }}</dd>
      <dt>Wifi</dt><dd data-field="wlan0">{{ s.wlan0 }}</dd>
      <dt>Hostname</dt><dd>{{ hostname }}.local</dd>
    </dl>
  </section>

  <section class="card">
    <h2>Over dit apparaat</h2>
    <dl class="kv">
      <dt>Naam</dt><dd>{{ device_name }}</dd>
      <dt>Versie</dt><dd>Daynivo Kiosk OS {{ s.version }}</dd>
      <dt>Besturingssysteem</dt><dd>{{ s.os }}</dd>
      <dt>Hardware</dt><dd>{{ s.model }}</dd>
    </dl>
  </section>
</div>
{% endblock %}