{% import 'partials/components/ui_macros.html' as ui %}
<div data-collected-at="{{ info.collected_at }}">

{# ── Gauges: CPU / RAM / Swap / Disk ──────────────────────────────── #}
<div class="sysinfo-gauges" style="display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; margin-bottom:16px;">

  {# CPU #}
  <div class="ds-card on" style="padding:16px 18px;" data-debug-label="ds-card">
    <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;">
      <div style="font-size:11px; text-transform:uppercase; letter-spacing:0.07em; color:var(--text-3); font-weight:600;">CPU</div>
      <div style="font-size:24px; font-weight:700; color:var(--text);">{{ info.cpu.percent }}<span style="font-size:14px; color:var(--text-3);">%</span></div>
    </div>
    <div style="height:8px; background:var(--sel); border-radius:99px; overflow:hidden;">
      <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 style="font-size:11px; color:var(--text-3); margin-top:8px;">
      {{ 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>

  {# RAM #}
  <div class="ds-card on" style="padding:16px 18px;" data-debug-label="ds-card">
    <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;">
      <div style="font-size:11px; text-transform:uppercase; letter-spacing:0.07em; color:var(--text-3); font-weight:600;">RAM</div>
      <div style="font-size:24px; font-weight:700; color:var(--text);">{{ info.mem.percent }}<span style="font-size:14px; color:var(--text-3);">%</span></div>
    </div>
    <div style="height:8px; background:var(--sel); border-radius:99px; overflow:hidden;">
      <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 style="font-size:11px; color:var(--text-3); margin-top:8px; 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>

  {# Swap #}
  <div class="ds-card on" style="padding:16px 18px;" data-debug-label="ds-card">
    <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;">
      <div style="font-size:11px; text-transform:uppercase; letter-spacing:0.07em; color:var(--text-3); font-weight:600;">SWAP</div>
      <div style="font-size:24px; font-weight:700; color:var(--text);">{{ info.swap.percent }}<span style="font-size:14px; color:var(--text-3);">%</span></div>
    </div>
    <div style="height:8px; background:var(--sel); border-radius:99px; overflow:hidden;">
      <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 style="font-size:11px; color:var(--text-3); margin-top:8px; display:flex; justify-content:space-between;">
      <span>{{ info.swap.used }} belegt</span><span>{{ info.swap.total }} gesamt</span>
    </div>
  </div>

  {# Disk (/) #}
  {% if info.root_disk %}
  <div class="ds-card on" style="padding:16px 18px;" data-debug-label="ds-card">
    <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;">
      <div style="font-size:11px; text-transform:uppercase; letter-spacing:0.07em; color:var(--text-3); font-weight:600;">DISK</div>
      <div style="font-size:24px; font-weight:700; color:var(--text);">{{ info.root_disk.percent }}<span style="font-size:14px; color:var(--text-3);">%</span></div>
    </div>
    <div style="height:8px; background:var(--sel); border-radius:99px; overflow:hidden;">
      <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 style="font-size:11px; color:var(--text-3); margin-top:8px; 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>
  {% endif %}

  {# Extra-Disks (projektspezifisch via configure(extra_disks=[...])) #}
  {% for ed in info.extra_disks %}
  <div class="ds-card on" style="padding:16px 18px;" data-debug-label="ds-card">
    <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;">
      <div style="font-size:11px; text-transform:uppercase; letter-spacing:0.07em; color:var(--text-3); font-weight:600;">{{ ed.label }}</div>
      <div style="font-size:24px; font-weight:700; color:var(--text);">{{ ed.percent }}<span style="font-size:14px; color:var(--text-3);">%</span></div>
    </div>
    <div style="height:8px; background:var(--sel); border-radius:99px; overflow:hidden;">
      <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 style="font-size:11px; color:var(--text-3); margin-top:8px; 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>
  {% endfor %}

</div>


{# ── Anwendung + Updates nebeneinander ────────────────────────────── #}
<div class="sysinfo-app-grid" style="display:grid; grid-template-columns:{% if info.updater %}repeat(auto-fit, minmax(min(100%, 340px), 1fr)){% else %}1fr{% endif %}; gap:12px;">

  {# Anwendung #}
  <div class="ds-card on" data-debug-label="ds-card">
    <div class="card-body" style="padding:16px;" data-debug-label="card-body">
      <div style="font-weight:600; margin-bottom:12px;">Anwendung</div>
      <div class="meta-grid" style="row-gap:8px;">
        {% for key, val in info.software.items() %}
        {% if key != 'psutil' %}
        <span class="meta-label">{{ key }}</span>
        <span class="meta-value" style="font-family:var(--mono); color:var(--text-2);">{{ val }}</span>
        {% endif %}
        {% endfor %}
        <span class="meta-label">Verzeichnis</span>
        <span class="meta-value" style="font-family:var(--mono); font-size:11px; color:var(--text-2);
                                        overflow:hidden; text-overflow:ellipsis; white-space:nowrap;"
              title="{{ info.system.cwd }}">{{ info.system.cwd }}</span>
        <span class="meta-label">User</span>
        <span class="meta-value" style="font-family:var(--mono); color:var(--text-2);">{{ info.system.user }}</span>
      </div>
      {% if info.services %}
      <div style="margin-top:14px; display:flex; flex-direction:column; gap:6px;">
        {% 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);">
          <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 %}
    </div>
  </div>

  {# Updates (nur wenn Updater konfiguriert) #}
  {% if info.updater %}
  {% set upd = info.updater %}
  <div class="ds-card on" data-debug-label="ds-card">
    <div class="card-body" style="padding:16px;" data-debug-label="card-body">
      <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;">
        <div style="font-weight:600;">Updates</div>
        <div style="display:flex; align-items:center; gap:10px;">
          {% if upd.last_checked %}
          <span style="font-size:11px; color:var(--text-3);">Geprüft: {{ upd.last_checked }}</span>
          {% endif %}
          {% if upd.packages | selectattr('update_available') | list %}
          <button class="btn btn-sm" style="background:var(--g); color:#fff; border:none;"
                  hx-post="/ui/system/update"
                  hx-target="body" hx-swap="beforeend">
            Jetzt aktualisieren
          </button>
          {% else %}
          <button class="btn btn-ghost btn-sm"
                  hx-post="/ui/system/check"
                  hx-target="#system-metrics" hx-swap="innerHTML">
            Auf Updates prüfen
          </button>
          {% endif %}
        </div>
      </div>
      <table style="width:100%; border-collapse:collapse; font-size:13px;">
        <thead>
          <tr>
            {% for col in ['Paket', 'Installiert', 'Verfügbar', ''] %}
            <th style="padding:6px 12px; text-align:left; font-size:11px; text-transform:uppercase;
                       letter-spacing:0.05em; color:var(--text-3); font-weight:600; white-space:nowrap;
                       border-bottom:1px solid var(--border-s);">{{ col }}</th>
            {% endfor %}
          </tr>
        </thead>
        <tbody>
          {% for pkg in upd.packages %}
          <tr style="border-bottom:1px solid var(--border-s);">
            <td style="padding:8px 12px; font-family:var(--mono); font-size:12px;">{{ pkg.name }}</td>
            <td style="padding:8px 12px; font-family:var(--mono); font-size:12px; color:var(--text-2);">{{ pkg.installed }}</td>
            <td style="padding:8px 12px; font-family:var(--mono); font-size:12px;">
              {% if pkg.latest == '—' %}<span style="color:var(--text-3);">—</span>
              {% elif pkg.update_available %}<span style="color:var(--g); font-weight:600;">{{ pkg.latest }}</span>
              {% else %}<span style="color:var(--text-3);">aktuell</span>{% endif %}
            </td>
            <td style="padding:8px 12px; text-align:right;">
              {% if pkg.update_available %}
              <span style="font-size:11px; padding:2px 8px; border-radius:99px;
                           background:rgba(38,162,105,0.15); color:var(--g); font-weight:600;">
                Update verfügbar
              </span>
              {% endif %}
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
  {% endif %}

</div>

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