{# docker/container_logs.html — per-container log viewer (m79) #}
{% extends "base.html" %}
{% from "_macros.html" import crumbs %}
{% block title %}Logs — {{ name }} — Docker — Steward{% endblock %}
{% block breadcrumb %}{{ crumbs([
  ("Docker", "/plugins/docker/"),
  (name, "/plugins/docker/container/" ~ host_id ~ "/" ~ name),
  ("Logs", "")]) }}{% endblock %}
{% block content %}

<div style="display:flex;align-items:baseline;gap:0.6rem;margin-bottom:0.35rem;flex-wrap:wrap;">
  <h1 class="page-title" style="margin-bottom:0;">{{ name }}</h1>
  <span style="font-size:0.9rem;color:var(--text-muted);">logs</span>
</div>
<div style="font-size:0.82rem;color:var(--text-muted);margin-bottom:1rem;">
  Recent lines (newest first) collected by the host agent{% if host %} on
  <a href="/hosts/{{ host.id }}" style="color:var(--text-muted);">{{ host.name }}</a>{% endif %} —
  updated every few seconds.
  <a href="/plugins/docker/container/{{ host_id }}/{{ name }}">← back to container</a>
</div>

{# ── Controls: stream filter + text search (drive the fragment via HTMX) ───── #}
<form id="log-controls" onsubmit="return false;"
      style="display:flex;gap:0.6rem;align-items:center;flex-wrap:wrap;margin-bottom:0.6rem;">
  <label style="font-size:0.8rem;color:var(--text-muted);display:flex;align-items:center;gap:0.35rem;">
    Stream
    <select name="stream" style="padding:0.25rem 0.4rem;">
      <option value="all">all</option>
      <option value="stdout">stdout</option>
      <option value="stderr">stderr</option>
    </select>
  </label>
  <input type="search" name="q" placeholder="Filter lines…" autocomplete="off"
         aria-label="Filter log lines"
         style="flex:1;min-width:180px;padding:0.3rem 0.5rem;">
</form>

<div class="card-flush">
  <div id="log-lines"
       hx-get="/plugins/docker/container/{{ host_id }}/{{ name }}/logs/lines"
       hx-trigger="load, every 5s, change from:#log-controls, keyup changed delay:400ms from:#log-controls"
       hx-include="#log-controls"
       hx-swap="innerHTML"
       role="log" aria-live="polite" tabindex="0"
       style="max-height:70vh;overflow:auto;padding:0.5rem 0.75rem;
              font-family:ui-monospace,monospace;font-size:0.8rem;line-height:1.5;">
    <div style="color:var(--text-muted);">Loading…</div>
  </div>
</div>

{% endblock %}