{% import 'partials/components/ui_macros.html' as ui %}
{% if not info.ok %}
<div id="system-metrics">
  <div class="empty-state">
    <svg width="40" height="40" viewBox="0 0 24 24" fill="currentColor" stroke="none"><use href="#icon-info"></use></svg>
    <div class="empty-state-title">Systeminfo nicht verfügbar</div>
    <div class="empty-state-sub">{{ info.error }}</div>
  </div>
</div>
{% else %}
<div id="system-metrics" data-collected-at="{{ info.collected_at }}">

{# ── Haupt-Layout: linke Info-Karte + rechte 2×2-Gauges ───────────── #}
<div class="content-columns content-columns--wide">

{# ── Linke Karte: Versionen / Infos ───────────────────────────────── #}
<div class="content-item on sysinfo-info-card" data-debug-label="content-item">
  <div class="sysinfo-card-header">
    <span>Anwendung</span>
    {% if info.updater %}
    <button class="btn btn-ghost btn-sm"
            hx-post="/ui/system/check"
            hx-target="#system-metrics" hx-swap="outerHTML">
      Auf Updates prüfen
    </button>
    {% endif %}
  </div>
  <div style="padding:0 16px 12px;" data-debug-label="content-subitem">
  <table class="ds-list-table">
    <tbody>

      {# 1. App-Version aus dem Updater (mit optionalem Update-Button) #}
      {% if info.updater %}
        {% for pkg in info.updater.packages %}
        <tr class="on">
          <td>{{ pkg.name }}</td>
          <td>
            {{ pkg.installed }}
            {% if pkg.update_available %}
            <span style="color:var(--g); font-weight:600; margin-left:4px;">→ {{ pkg.latest }}</span>
            {% endif %}
          </td>
          <td>
            {% if pkg.update_available %}
            <button class="btn btn-sm"
                    style="background:var(--g); color:#fff; border:none; white-space:nowrap; font-size:11px; padding:3px 10px;"
                    hx-post="/ui/system/update"
                    hx-target="body" hx-swap="beforeend">
              Update
            </button>
            {% endif %}
          </td>
        </tr>
        {% endfor %}
      {% endif %}

      {# 2. User #}
      <tr class="on">
        <td>User</td>
        <td>{{ info.system.user }}</td>
        <td></td>
      </tr>

      {# 3. Datenbank (falls in software vorhanden) #}
      {% if info.software.get('Datenbank') %}
      <tr class="on">
        <td>Datenbank</td>
        <td>{{ info.software['Datenbank'] }}</td>
        <td></td>
      </tr>
      {% endif %}

      {# 4. Restliche Software-Einträge (Dependencies) #}
      {% for key, val in info.software.items() %}
      {% if key not in ('psutil', 'Datenbank') %}
      <tr class="on">
        <td>{{ key }}</td>
        <td>{{ val }}</td>
        <td></td>
      </tr>
      {% endif %}
      {% endfor %}

    </tbody>
  </table>
  </div>{# /padding #}
</div>

{# ── Rechte Seite: 2×2 Gauge-Karten ──────────────────────────────── #}
<div class="sysinfo-gauges-grid">

  {# CPU #}
  <div class="content-item on sysinfo-gauge-card" data-debug-label="content-item">
    <div class="sysinfo-card-header">CPU</div>
    <div style="padding:0 18px 16px;">
    <div class="sysinfo-gauge-head">
      <div class="sysinfo-gauge-value">{{ info.cpu.percent }}<span class="sysinfo-gauge-unit">%</span></div>
    </div>
    <div class="sysinfo-gauge-bar-wrap">
      <div style="height:100%; width:{{ info.cpu.percent }}%; border-radius:99px;
                  background:{{ 'var(--r)' if info.cpu.percent > 85 else ('var(--b)' if info.cpu.percent > 50 else 'var(--g)') }};
                  transition:width 400ms;"></div>
    </div>
    <div class="sysinfo-gauge-sub">
      {{ info.cpu.cores }} Kerne · {{ info.cpu.freq }}
      {% if info.cpu.model %}<div style="margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">{{ info.cpu.model }}</div>{% endif %}
    </div>
    </div>{# /padding #}
  </div>

  {# RAM #}
  <div class="content-item on sysinfo-gauge-card" data-debug-label="content-item">
    <div class="sysinfo-card-header">RAM</div>
    <div style="padding:0 18px 16px;">
    <div class="sysinfo-gauge-head">
      <div class="sysinfo-gauge-value">{{ info.mem.percent }}<span class="sysinfo-gauge-unit">%</span></div>
    </div>
    <div class="sysinfo-gauge-bar-wrap">
      <div style="height:100%; width:{{ info.mem.percent }}%; border-radius:99px;
                  background:{{ 'var(--r)' if info.mem.percent > 85 else ('var(--b)' if info.mem.percent > 60 else 'var(--g)') }};
                  transition:width 400ms;"></div>
    </div>
    <div class="sysinfo-gauge-sub" style="display:flex; justify-content:space-between;">
      <span>{{ info.mem.used }} belegt</span><span>{{ info.mem.free }} frei</span><span>{{ info.mem.total }} gesamt</span>
    </div>
    </div>{# /padding #}
  </div>

  {# DISK (/) #}
  {% if info.root_disk %}
  <div class="content-item on sysinfo-gauge-card" data-debug-label="content-item">
    <div class="sysinfo-card-header">DISK</div>
    <div style="padding:0 18px 16px;">
    <div class="sysinfo-gauge-head">
      <div class="sysinfo-gauge-value">{{ info.root_disk.percent }}<span class="sysinfo-gauge-unit">%</span></div>
    </div>
    <div class="sysinfo-gauge-bar-wrap">
      <div style="height:100%; width:{{ info.root_disk.percent }}%; border-radius:99px;
                  background:{{ 'var(--r)' if info.root_disk.percent > 90 else ('var(--b)' if info.root_disk.percent > 70 else 'var(--g)') }};
                  transition:width 400ms;"></div>
    </div>
    <div class="sysinfo-gauge-sub" style="display:flex; justify-content:space-between;">
      <span>{{ info.root_disk.used_fmt }} belegt</span><span>{{ info.root_disk.free_fmt }} frei</span><span>{{ info.root_disk.total_fmt }} gesamt</span>
    </div>
    </div>{# /padding #}
  </div>
  {% else %}<div></div>{% endif %}

  {# SWAP #}
  <div class="content-item on sysinfo-gauge-card" data-debug-label="content-item">
    <div class="sysinfo-card-header">SWAP</div>
    <div style="padding:0 18px 16px;">
    <div class="sysinfo-gauge-head">
      <div class="sysinfo-gauge-value">{{ info.swap.percent }}<span class="sysinfo-gauge-unit">%</span></div>
    </div>
    <div class="sysinfo-gauge-bar-wrap">
      <div style="height:100%; width:{{ info.swap.percent }}%; border-radius:99px;
                  background:{{ 'var(--r)' if info.swap.percent > 70 else 'var(--b-dim, var(--b))' }};
                  transition:width 400ms;"></div>
    </div>
    <div class="sysinfo-gauge-sub" style="display:flex; justify-content:space-between;">
      <span>{{ info.swap.used }} belegt</span><span>{{ info.swap.total }} gesamt</span>
    </div>
    </div>{# /padding #}
  </div>

</div>{# /sysinfo-gauges-grid #}
</div>{# /sysinfo-layout #}

{# ── Services (falls konfiguriert) ───────────────────────────────── #}
{% if info.services %}
<div style="margin-top:12px; display:flex; flex-direction:column; gap:6px;" data-debug-label="content-item">
  {% for svc in info.services %}
  <div style="display:flex; align-items:center; justify-content:space-between;
              padding:8px 10px; background:var(--sel); border-radius:var(--rad);" data-debug-label="content-subitem">
    <div>
      <div style="font-family:var(--mono); font-size:13px; color:var(--text);">{{ svc.name }}</div>
      {% if svc.desc %}<div style="font-size:11px; color:var(--text-3); margin-top:1px;">{{ svc.desc }}</div>{% endif %}
    </div>
    <div style="display:flex; align-items:center; gap:8px;">
      <span style="font-size:11px; color:var(--text-3);">{{ svc.enabled }}</span>
      <span style="font-size:12px; font-weight:600; padding:2px 8px; border-radius:99px;
                   background:{{ 'rgba(38,162,105,0.2)' if svc.ok else 'var(--err-bg)' }};
                   color:{{ 'var(--g)' if svc.ok else 'var(--err)' }};">
        {{ svc.active }}
      </span>
    </div>
  </div>
  {% endfor %}
</div>
{% endif %}

{# ──────────────────────────────────────────────────────────────────── #}
{# LEGACY-ABSCHNITT ENTFERNT (gauges + app-grid) – neues Layout oben  #}

{# Dummy-Elemente damit ältere HTMX-Targets nicht brechen #}
<div class="sysinfo-gauges" style="display:none;"></div>
<div class="sysinfo-app-grid" style="display:none;"></div>


</div>{# /data-collected-at #}
{% endif %}