{% load forge_icons %}
<article class="rounded-xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-4">
  <div class="mb-3 flex items-center justify-between">
    <h2 class="text-base font-semibold text-slate-900 dark:text-slate-100 flex items-center gap-2">
      {% forge_icon "activity" "h-4 w-4 text-slate-500" %}
      <span>System health</span>
    </h2>
    <span class="text-xs rounded-full bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300 px-2 py-1">Operational</span>
  </div>
  <ul class="space-y-2">
    {% for item in items %}
      <li class="flex items-center justify-between text-sm rounded-lg border border-slate-200 dark:border-slate-700 px-3 py-2">
        <span class="text-slate-700 dark:text-slate-200">{{ item.label }}</span>
        <span class="text-slate-500">{{ item.value }}</span>
      </li>
    {% endfor %}
  </ul>
</article>