{% extends "content.html" %}
{% block inner %}
{% if not info.ok %}
<div class="empty-state">
  <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1">
    <circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/>
  </svg>
  <div class="empty-state-title">Systeminfo nicht verfügbar</div>
  <div class="empty-state-sub">{{ info.error }}</div>
</div>
{% else %}

<div class="table-toolbar" data-debug-label="table-toolbar">
  <div class="table-toolbar-title">System</div>
  <div class="table-toolbar-right">
    <span style="font-family:var(--mono); font-size:12px; color:var(--text-3);">Stand: <span id="system-time">{{ info.collected_at }}</span></span>
    <button class="btn btn-ghost btn-sm"
            hx-get="/ui/system/metrics"
            hx-target="#system-metrics"
            hx-swap="innerHTML"
            hx-indicator="#system-spinner">
      Aktualisieren
    </button>
    <svg id="system-spinner" class="htmx-indicator" width="14" height="14"
         viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
         style="animation:spin 1s linear infinite; display:none;">
      <line x1="12" y1="2" x2="12" y2="6"/><line x1="12" y1="18" x2="12" y2="22"/>
      <line x1="4.93" y1="4.93" x2="7.76" y2="7.76"/>
      <line x1="16.24" y1="16.24" x2="19.07" y2="19.07"/>
    </svg>
  </div>
</div>

<div id="system-metrics">
  {% include "system/partials/metrics.html" %}
</div>

<script>
document.body.addEventListener('htmx:afterSettle', function(e) {
  if (e.target && e.target.id === 'system-metrics') {
    var t = e.target.querySelector('[data-collected-at]');
    if (t) {
      var el = document.getElementById('system-time');
      if (el) el.textContent = t.dataset.collectedAt;
    }
  }
});
</script>

{% endif %}
{% endblock %}