{# docker/rows.html — HTMX fragment for the Docker main page #}

{# ── Summary strip ─────────────────────────────────────────────────────────── #}
<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:0.75rem;margin-bottom:1.5rem;">
  <div class="card" style="margin-bottom:0;">
    <div class="section-title" style="margin-bottom:0.35rem;">Running</div>
    <span class="stat-val" style="color:var(--green);">{{ running }}</span>
  </div>
  <div class="card" style="margin-bottom:0;">
    <div class="section-title" style="margin-bottom:0.35rem;">Stopped</div>
    <span class="stat-val" style="{% if stopped %}color:var(--text-muted){% endif %};">{{ stopped }}</span>
  </div>
  <div class="card" style="margin-bottom:0;">
    <div class="section-title" style="margin-bottom:0.35rem;">Total</div>
    <span class="stat-val">{{ container_data | length }}</span>
  </div>
</div>

{# ── Container table ─────────────────────────────────────────────────────── #}
{% if container_data %}
<div class="card-flush">
  <table class="table">
    <thead>
      <tr>
        <th>Container</th>
        <th>Image</th>
        <th>Ports</th>
        <th>CPU %</th>
        <th style="min-width:100px;">CPU history</th>
        <th>Mem %</th>
        <th style="min-width:100px;">Mem history</th>
      </tr>
    </thead>
    <tbody>
      {% for item in container_data %}
      {% set c = item.container %}
      <tr>
        <td>
          <div style="display:flex;align-items:center;gap:0.5rem;">
            <span class="dot {% if c.status == 'running' %}dot-up{% elif c.status == 'paused' %}dot-warn{% else %}dot-down{% endif %}"></span>
            <div>
              <div style="font-weight:500;font-size:0.9rem;">{{ c.name }}</div>
              <div style="font-size:0.73rem;color:var(--text-muted);">{{ c.status }}</div>
            </div>
          </div>
        </td>
        <td style="font-size:0.82rem;color:var(--text-muted);max-width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">
          {{ c.image }}
        </td>
        <td style="font-size:0.78rem;font-family:ui-monospace,monospace;">
          {% for p in item.ports %}
          <div style="color:var(--text-muted);">{{ p.host_port }}:{{ p.container_port }}/{{ p.protocol }}</div>
          {% endfor %}
        </td>
        <td style="font-family:ui-monospace,monospace;font-size:0.88rem;">
          {% if c.cpu_pct is not none %}
          <span style="color:{% if c.cpu_pct > 80 %}var(--red){% elif c.cpu_pct > 50 %}var(--orange){% else %}var(--text){% endif %};">
            {{ "%.1f" | format(c.cpu_pct) }}%
          </span>
          {% else %}
          <span style="color:var(--text-dim);">—</span>
          {% endif %}
        </td>
        <td>{{ item.sparkline_cpu | safe }}</td>
        <td style="font-family:ui-monospace,monospace;font-size:0.88rem;">
          {% if c.mem_pct is not none %}
          <span style="color:{% if c.mem_pct > 90 %}var(--red){% elif c.mem_pct > 70 %}var(--orange){% else %}var(--text){% endif %};">
            {{ "%.1f" | format(c.mem_pct) }}%
          </span>
          {% else %}
          <span style="color:var(--text-dim);">—</span>
          {% endif %}
        </td>
        <td>{{ item.sparkline_mem | safe }}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% else %}
<div class="card" style="text-align:center;padding:3rem;">
  <div style="color:var(--text-muted);font-size:0.9rem;">
    No containers found. Make sure the Docker socket is accessible and the plugin is configured correctly.
  </div>
</div>
{% endif %}