{% 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: Anwendungen + System-Info ───────────────────────── #}
{# Paketnamen aus dem Updater sammeln (für Deduplizierung) #}
{% set ns = namespace(updater_names=[]) %}
{% if info.updater %}{% for p in info.updater.packages %}{% set ns.updater_names = ns.updater_names + [p.name] %}{% endfor %}{% endif %}

{# ── Karte 1: Anwendungen ────────────────────────────────────────── #}
<div class="content-item on sysinfo-info-card" data-debug-label="content-item">
  <div class="sysinfo-card-header">
    <span>Anwendungen</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>
      {% 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 %}
      {% for key, val in info.software.items() %}
      {% if key not in ('psutil', 'Datenbank') and key not in ns.updater_names and key.startswith('python') %}
      <tr class="on">
        <td>{{ key }}</td>
        <td>{{ val }}</td>
        <td></td>
      </tr>
      {% endif %}
      {% endfor %}
      {% for key, val in info.software.items() %}
      {% if key not in ('psutil', 'Datenbank') and key not in ns.updater_names and not key.startswith('python') %}
      <tr class="on">
        <td>{{ key }}</td>
        <td>{{ val }}</td>
        <td></td>
      </tr>
      {% endif %}
      {% endfor %}
    </tbody>
  </table>
  </div>
</div>

{# ── Rechte Spalte: System-Karte + Gauges ────────────────────────── #}
<div style="display:flex; flex-direction:column; gap:12px;">

{# ── Karte 2: System ─────────────────────────────────────────────── #}
<div class="content-item on sysinfo-info-card" data-debug-label="content-item">
  <div class="sysinfo-card-header">
    <span>System</span>
  </div>
  <div style="padding:0 16px 12px;" data-debug-label="content-subitem">
  <table class="ds-list-table">
    <tbody>
      <tr class="on">
        <td>OS</td>
        <td>{{ info.system.os_pretty }}</td>
        <td></td>
      </tr>
      <tr class="on">
        <td>User</td>
        <td>{{ info.system.user }}</td>
        <td></td>
      </tr>
      {% if info.software.get('Datenbank') %}
      <tr class="on">
        <td>Datenbank</td>
        <td>{{ info.software['Datenbank'] }}</td>
        <td></td>
      </tr>
      {% endif %}
    </tbody>
  </table>
  </div>
</div>

{# ── Gauges: CPU, RAM, DISK, SWAP ─────────────────────────────────── #}
<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 %}

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

</div>{# /sysinfo-gauges-grid #}
</div>{# /rechte Spalte #}
</div>{# /content-columns #}


{# ──────────────────────────────────────────────────────────────────── #}
{# 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 %}