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

{# docker/rows.html — HTMX fragment for the Docker page: what needs attention
   first (service.needs_attention, the ranking the MCP tools use), the counts,
   then swarm services and each host's containers. #}
{% from "_macros.html" import stat_tile, status_badge, status_dot %}

{# ── Needs attention ──────────────────────────────────────────────────────── #}
{% if attention %}
<section class="card problem-card" aria-labelledby="docker-problems">
  <h2 id="docker-problems" class="section-title" style="margin-bottom:0.6rem;">Needs attention</h2>
  <ul class="problem-list">
    {% for r in attention %}
    {% set c = r.container %}
    {% set worst = r.problems[0] %}
    <li>
      {{ status_badge('crit' if severity[worst] == 'critical' else 'warn', worst|replace('_', ' ')|capitalize) }}
      <a href="/plugins/docker/container/{{ c.host_id }}/{{ c.name }}">{{ c.name }}</a>
      <span class="problem-detail">
        {%- for p in r.problems %}{{ says[p] }}{{ " and " if not loop.last }}{% endfor %}
        {%- if c.exit_code and worst in ('exited_nonzero', 'crash_looping', 'restarting') %} · exit {{ c.exit_code }}{% endif %}
        {%- if r.since %} · since {{ r.since|ago }}{% endif %}
        {%- if r.stale %} · {{ status_badge('stale') }} last report {{ c.scraped_at|ago if c.scraped_at else "never" }}{% endif -%}
      </span>
    </li>
    {% endfor %}
  </ul>
</section>
{% endif %}

{# ── Counts ───────────────────────────────────────────────────────────────── #}
<div class="stat-strip">
  {{ stat_tile("Needs attention", attention|length, state="crit" if attention else "inactive") }}
  {{ stat_tile("Unhealthy", unhealthy, state="crit" if unhealthy else "inactive") }}
  {{ stat_tile("Restarting", restarting, state="crit" if restarting else "inactive", hint="restarting or crash-looping") }}
  {{ stat_tile("Running", running, state="up" if running else "inactive") }}
  {{ stat_tile("Stopped", stopped, state="inactive") }}
  {% if stale %}{{ stat_tile("Stale", stale, state="stale", hint="no recent report") }}{% endif %}
  {% if swarm_services %}{{ stat_tile("Services", swarm_services|length, href="/plugins/docker/swarm") }}{% endif %}
  {{ stat_tile("Hosts", host_groups|length) }}
</div>

{# ── Swarm services: collapsed per-service, each current replica labelled with
   its host (tasks Swarm replaced are left out). Ghost replicas (tasks on nodes
   with no Steward agent) come from the managers' placement data so the picture
   is cluster-complete. A failing service names Swarm's last task error. ───── #}
{% if swarm_services %}
<div class="card-flush" style="margin-bottom:1.5rem;">
  <div style="display:flex;align-items:baseline;gap:0.6rem;padding:0.5rem 0.75rem;border-bottom:1px solid var(--border);">
    <span style="font-weight:600;font-size:0.95rem;">Swarm services</span>
    <a href="/plugins/docker/swarm" style="font-size:0.78rem;color:var(--text-muted);">Topology →</a>
  </div>
  <div style="padding:0.5rem 0.75rem;display:grid;gap:0.85rem;">
    {% for s in swarm_services %}
    <div>
      <div style="display:flex;align-items:center;gap:0.55rem;flex-wrap:wrap;margin-bottom:0.35rem;">
        <span class="dot {% if s.state == 'healthy' %}dot-up{% elif s.state == 'degraded' %}dot-warn{% else %}dot-down{% endif %}"></span>
        <span style="font-weight:600;font-size:0.9rem;">{{ s.name }}</span>
        <span style="font-size:0.72rem;color:var(--text-dim);">{{ s.mode }}</span>
        <span class="tone-{{ 'ok' if s.state == 'healthy' else ('warn' if s.state == 'degraded' else 'crit') }}" style="font-size:0.78rem;font-variant-numeric:tabular-nums;">
          {{ s.running }}/{{ s.desired }} running
        </span>
      </div>
      {% with style="padding-left:1.1rem;margin-bottom:0.35rem;" %}{% include "docker/_swarm_failures.html" %}{% endwith %}
      <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:0.4rem;padding-left:1.1rem;">
        {% for r in s.replicas %}
        {% if r.ghost %}
        <div style="display:flex;align-items:center;gap:0.4rem;font-size:0.8rem;background:var(--bg-elevated);border:1px dashed var(--border-mid);border-radius:5px;padding:0.3rem 0.55rem;" title="Running on a node with no Steward agent — detail unavailable">
          <span class="dot dot-warn" style="opacity:0.6;"></span>
          <span style="font-weight:500;">{{ r.host }}</span>
          <span style="color:var(--text-dim);margin-left:auto;">{{ r.count }} · no agent</span>
        </div>
        {% else %}
        <div style="display:flex;align-items:center;gap:0.4rem;font-size:0.8rem;background:var(--bg-elevated);border:1px solid var(--border);border-radius:5px;padding:0.3rem 0.55rem;">
          <span class="dot {% if r.status == 'running' %}dot-up{% elif r.status == 'paused' %}dot-warn{% else %}dot-down{% endif %}"></span>
          <a href="/plugins/docker/container/{{ r.host_id }}/{{ r.name }}" style="font-weight:500;color:inherit;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" title="{{ r.name }}">{{ r.host }}</a>
          {% if r.cpu_pct is not none %}<span style="color:var(--text-muted);font-family:ui-monospace,monospace;margin-left:auto;">{{ "%.0f" | format(r.cpu_pct) }}%</span>{% endif %}
        </div>
        {% endif %}
        {% endfor %}
      </div>
    </div>
    {% endfor %}
  </div>
</div>
{% endif %}

{# ── Container tables, one per host ───────────────────────────────────────── #}
{% if host_groups %}
{% for g in host_groups %}
<div class="card-flush" style="margin-bottom:1.5rem;">
  <div style="display:flex;align-items:baseline;gap:0.6rem;padding:0.5rem 0.75rem;border-bottom:1px solid var(--border);">
    {% if g.host %}
    <a href="/hosts/{{ g.host.id }}" style="font-weight:600;font-size:0.95rem;color:inherit;text-decoration:none;">{{ g.host.name }}</a>
    {% else %}
    <span style="font-weight:600;font-size:0.95rem;">{{ g.host_name }}</span>
    {% endif %}
    <span style="font-size:0.78rem;color:var(--text-muted);">
      {{ g.running }} running{% if g.stopped %} · {{ g.stopped }} stopped{% endif %}
    </span>
  </div>
  <table class="table">
    <thead>
      <tr>
        <th>Container</th>
        <th>Image</th>
        <th>Ports</th>
        <th>CPU %</th>
        <th>Mem %</th>
      </tr>
    </thead>
    <tbody>
      {% for sub in g.subgroups %}
      {% if g.grouped and sub.label %}
      <tr><td colspan="5" style="padding:0.4rem 0.75rem 0.2rem;font-size:0.72rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:0.05em;font-weight:600;">{{ sub.label }}</td></tr>
      {% endif %}
      {% for item in sub.containers %}
      {% set c = item.container %}
      <tr>
        <td>
          <div style="display:flex;align-items:center;gap:0.5rem;">
            {{ status_dot('stale' if item.stale else ('up' if c.status == 'running' else ('pending' if c.status == 'paused' else 'down')), 'Stale' if item.stale else c.status|capitalize) }}
            <div>
              <div style="font-weight:500;font-size:0.9rem;">
                <a href="/plugins/docker/container/{{ c.host_id }}/{{ c.name }}" style="color:inherit;text-decoration:none;border-bottom:1px dotted var(--border-mid);">{{ c.name }}</a>
                {% if c.health == 'unhealthy' %} {{ status_badge('crit', 'Unhealthy') }}
                {% elif c.health == 'starting' %} {{ status_badge('pending', 'Starting') }}{% endif %}
                {% if item.stale %} {{ status_badge('stale', title="Last report " ~ (c.scraped_at.strftime('%Y-%m-%d %H:%M UTC') if c.scraped_at else 'never') ~ "; what is shown may no longer be true") }}{% endif %}
              </div>
              <div style="font-size:0.73rem;color:var(--text-muted);">
                {{ c.status }}{% if item.uptime %} · up {{ item.uptime }}{% endif %}
                {% if c.status != 'running' and c.exit_code is not none and c.exit_code != 0 %}
                  · <span class="tone-crit">exit {{ c.exit_code }}{% if c.oom_killed %} (OOM){% endif %}</span>
                {% endif %}
                {% if c.restart_count %} · <span class="tone-warn" title="Restarted {{ c.restart_count }} times">⟳{{ c.restart_count }}</span>{% endif %}
              </div>
              {% if c.service_name or c.compose_project %}
              <div style="font-size:0.68rem;color:var(--text-dim);margin-top:0.1rem;">
                {{ c.service_name or c.compose_project }}
              </div>
              {% endif %}
            </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 class="tone-{{ status_class(c.cpu_pct, 'cpu') }}">{{ "%.1f" | format(c.cpu_pct) }}%</span>
          {% else %}
          <span style="color:var(--text-dim);">—</span>
          {% endif %}
        </td>
        <td style="font-family:ui-monospace,monospace;font-size:0.88rem;">
          {% if c.mem_pct is not none %}
          <span class="tone-{{ status_class(c.mem_pct, 'mem') }}">{{ "%.1f" | format(c.mem_pct) }}%</span>
          {% else %}
          <span style="color:var(--text-dim);">—</span>
          {% endif %}
        </td>
      </tr>
      {% endfor %}
      {% endfor %}
    </tbody>
  </table>
</div>
{% endfor %}
{% elif not swarm_services %}
<div class="card" style="text-align:center;padding:3rem;">
  <div style="color:var(--text-muted);font-size:0.9rem;">
    No containers reported yet. Containers are collected by the Steward host agent —
    deploy the agent to a host running Docker (Hosts → the host → agent panel) and
    its containers will appear here under that host.
  </div>
</div>
{% endif %}