{# docker/widget_resources.html — dashboard widget: CPU + memory bars for running containers #}
{% if not containers %}
<div style="color:var(--text-muted);font-size:0.85rem;padding:0.5rem 0;">No running containers.</div>
{% else %}
<div style="display:grid;gap:0.5rem;">
  {% for c in containers %}
  <div>
    <div style="display:flex;justify-content:space-between;align-items:baseline;margin-bottom:0.15rem;">
      <span style="font-size:0.8rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:55%;">
        {{ c.name }}
      </span>
      <span style="font-size:0.72rem;color:var(--text-muted);font-family:ui-monospace,monospace;flex-shrink:0;margin-left:0.5rem;">
        {% if c.cpu_pct is not none %}CPU {{ "%.1f" | format(c.cpu_pct) }}%{% endif %}
        {% if c.mem_pct is not none %} · Mem {{ "%.1f" | format(c.mem_pct) }}%{% endif %}
      </span>
    </div>
    {% if c.cpu_pct is not none %}
    <div style="height:3px;background:var(--bg-elevated);border-radius:2px;margin-bottom:2px;">
      <div style="height:100%;border-radius:2px;width:{{ [c.cpu_pct, 100] | min }}%;
                  background:{% if c.cpu_pct > 80 %}var(--red){% elif c.cpu_pct > 50 %}var(--orange){% else %}var(--accent){% endif %};
                  transition:width 0.4s;">
      </div>
    </div>
    {% endif %}
    {% if c.mem_pct is not none %}
    <div style="height:3px;background:var(--bg-elevated);border-radius:2px;">
      <div style="height:100%;border-radius:2px;width:{{ [c.mem_pct, 100] | min }}%;
                  background:{% if c.mem_pct > 90 %}var(--red){% elif c.mem_pct > 70 %}var(--orange){% else %}var(--green){% endif %};
                  transition:width 0.4s;">
      </div>
    </div>
    {% endif %}
  </div>
  {% endfor %}
</div>
{% endif %}