{% extends "base.html" %}
{% from "_macros.html" import crumbs %}
{% from "monitors/_fields.html" import type_fields, toggle_script %}
{% block title %}{{ host.name }} — Hosts — Steward{% endblock %}
{% block breadcrumb %}{{ crumbs([("Hosts", "/hosts/"), (host.name, "")]) }}{% endblock %}
{% block content %}

<div style="display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.25rem;">
  <div>
    <h1 class="page-title" style="margin-bottom:0.2rem;">{{ host.name }}</h1>
    <div style="color:var(--text-muted);font-size:0.9rem;font-family:ui-monospace,monospace;">
      {{ host.address or "no address — resolves by name" }}
    </div>
  </div>
  <div style="display:flex;gap:0.5rem;align-items:center;">
    <a href="/hosts/{{ host.id }}/edit" class="btn btn-ghost btn-sm">Edit</a>
    {% if session.user_role == 'admin' %}
    <form method="post" action="/hosts/{{ host.id }}/delete" style="margin:0;"
          onsubmit="return confirm('Delete host {{ host.name }}? Monitors and history are removed.');">
      <button type="submit" class="btn btn-danger btn-sm">Delete</button>
    </form>
    {% endif %}
  </div>
</div>

{% set inp = "width:100%;padding:0.4rem 0.65rem;background:var(--bg);border:1px solid var(--border-mid);border-radius:4px;color:var(--text);font-size:0.88rem;" %}
{% set lbl = "font-size:0.75rem;color:var(--text-muted);display:block;margin-bottom:0.2rem;" %}

{# ── Live vitals strip (host_agent fragment) — full width on top, polled ────── #}
<div id="hv-strip"
     hx-get="/plugins/host_agent/vitals/{{ host.id }}"
     hx-trigger="load, every 15s"
     hx-swap="innerHTML"></div>

{# ── Monitors + Agent, side by side on wide screens, stacked when narrow ────── #}
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(420px,1fr));gap:1rem;align-items:start;margin-bottom:1rem;">

{# ── Monitors ─────────────────────────────────────────────────────────────── #}
<div class="card" style="margin-bottom:0;">
  <div style="display:flex;align-items:baseline;justify-content:space-between;margin-bottom:0.5rem;">
    <h3 class="section-title" style="margin-bottom:0;">Monitors</h3>
    {% if uptime %}
    <span style="font-size:0.8rem;color:var(--text-muted);">
      uptime 24h <strong>{{ ("%.1f%%"|format(uptime['24h'])) if uptime['24h'] is not none else '—' }}</strong>
      · 7d <strong>{{ ("%.1f%%"|format(uptime['7d'])) if uptime['7d'] is not none else '—' }}</strong>
      · 30d <strong>{{ ("%.1f%%"|format(uptime['30d'])) if uptime['30d'] is not none else '—' }}</strong>
    </span>
    {% endif %}
  </div>

  {% if monitors %}
  {% for d in monitors %}
  {% set m = d.monitor %}
  {% set latest = d.latest %}
  <div class="ping-row" {% if not m.enabled %}style="opacity:0.5;"{% endif %}>
    <div class="ping-meta" style="min-width:150px;max-width:230px;">
      <span class="badge" style="font-size:0.62rem;">{{ m.type | upper }}</span>
      <span class="ping-name" title="{{ m.name }}">{{ m.name }}</span>
      <span class="ping-addr" title="{{ m.target }}">{{ m.target }}</span>
    </div>
    <div class="ping-pills">
      {% for _ in range([30 - d.heartbeat|length, 0]|max) %}
      <span class="pill pill-empty" title="No data"></span>
      {% endfor %}
      {% for h in d.heartbeat %}
      <span class="pill" title="{{ h.title }}"
            style="background:{{ '#1a6632' if h.state == 'up' else '#6a1515' }};"></span>
      {% endfor %}
    </div>
    <div class="ping-cur">
      {% if latest is none %}<span class="ping-cur-nd">—</span>
      {% elif not latest.is_up %}<span class="ping-cur-down">DOWN</span>
      {% elif latest.response_ms is not none %}
        <span style="{{ threshold_style(latest.response_ms, 'latency') or 'color:var(--green);' }}">{{ "%.0f"|format(latest.response_ms) }} ms</span>
      {% else %}<span class="ping-cur-good">UP</span>{% endif %}
    </div>
    {% if session.user_role in ['operator', 'admin'] %}
    <div style="display:flex;gap:0.35rem;flex-shrink:0;">
      <a href="/monitors/{{ m.id }}/edit" class="btn btn-sm btn-ghost" style="padding:0.2rem 0.5rem;font-size:0.72rem;">Edit</a>
      <form method="post" action="/monitors/{{ m.id }}/delete" style="display:inline;"
            onsubmit="return confirm('Delete monitor {{ m.name }}?');">
        <button type="submit" class="btn btn-sm" style="padding:0.2rem 0.5rem;font-size:0.72rem;color:var(--red);">✕</button>
      </form>
    </div>
    {% endif %}
  </div>
  {% endfor %}
  {% else %}
  <p style="color:var(--text-muted);font-size:0.88rem;margin:0.25rem 0 0.75rem;">
    No monitors yet for this host. Add one below.
  </p>
  {% endif %}

  {% if session.user_role in ['operator', 'admin'] %}
  <details style="margin-top:0.75rem;">
    <summary style="cursor:pointer;font-size:0.85rem;color:var(--text-muted);">+ Add monitor for this host</summary>
    <form method="post" action="/monitors/add" style="display:grid;gap:0.6rem;margin-top:0.75rem;">
      <input type="hidden" name="host_id" value="{{ host.id }}">
      <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:0.6rem;align-items:end;">
        <div>
          <label style="{{ lbl }}">Type</label>
          <select name="type" id="mtype" onchange="mtoggle(this.value)" style="{{ inp }}">
            {% for t in monitor_types %}
            <option value="{{ t.value }}" {% if t.value == 'icmp' %}selected{% endif %}>{{ t.value | upper }}</option>
            {% endfor %}
          </select>
        </div>
        <div>
          <label style="{{ lbl }}">Name</label>
          <input type="text" name="name" placeholder="optional" autocomplete="off" style="{{ inp }}">
        </div>
        <div>
          <label style="{{ lbl }}">Target</label>
          <input type="text" name="target" value="{{ host.address }}" autocomplete="off" required style="{{ inp }}">
        </div>
        <div>
          <label style="{{ lbl }}">Interval (s, 0=global)</label>
          <input type="number" name="check_interval_seconds" value="0" min="0" style="{{ inp }}">
        </div>
        {{ type_fields() }}
      </div>
      <div><button type="submit" class="btn btn-sm">Add Monitor</button></div>
    </form>
  </details>
  {% endif %}
</div>{# Monitors card #}

{# ── Agent (host_agent management panel) ──────────────────────────────────── #}
<div hx-get="/plugins/host_agent/panel/{{ host.id }}" hx-trigger="load" hx-swap="innerHTML">
  <div class="card" style="margin-bottom:0;"><span style="color:var(--text-muted);font-size:0.85rem;">Loading agent…</span></div>
</div>
</div>{# Monitors + Agent grid #}

{# ── Ansible (full width) ─────────────────────────────────────────────────── #}
<div class="card">
  <h3 class="section-title">Ansible</h3>
  {% if linked_target %}
  <div style="display:flex;align-items:center;gap:1rem;padding:0.6rem 0.75rem;background:var(--bg-elevated);border-radius:4px;margin-bottom:1rem;flex-wrap:wrap;">
    <div style="flex:1;min-width:12rem;">
      <strong>{{ linked_target.name }}</strong>
      <span style="color:var(--text-muted);font-size:0.85rem;margin-left:0.5rem;">{{ linked_target.address }}</span>
      {% if linked_target.groups %}
      <div style="margin-top:0.25rem;">
        {% for grp in linked_target.groups %}
        <span style="font-size:0.78rem;background:var(--bg);border-radius:3px;padding:0.1em 0.4em;margin-right:0.2rem;color:var(--text-muted);">{{ grp.name }}</span>
        {% endfor %}
      </div>
      {% endif %}
    </div>
    <a href="/ansible/inventory/targets/{{ linked_target.id }}" class="btn btn-ghost btn-sm">Edit target</a>
    <form method="post" action="/hosts/{{ host.id }}/ansible-link" style="margin:0;">
      <input type="hidden" name="action" value="unlink">
      <button type="submit" class="btn btn-ghost btn-sm">Unlink</button>
    </form>
  </div>

  {% if ansible_sources %}
  <details>
    <summary style="cursor:pointer;font-size:0.85rem;color:var(--text-muted);">Run a playbook against this host</summary>
    <form method="post" action="/hosts/{{ host.id }}/run-playbook" style="margin-top:0.75rem;">
      <div class="form-group">
        <label>Source</label>
        <select name="source_name" required
                hx-get="/ansible/playbook-options" hx-trigger="load, change"
                hx-target="#hp-playbook" hx-swap="innerHTML" hx-include="this"
                hx-on::after-settle="htmx.trigger('#hp-playbook','change')">
          {% for s in ansible_sources %}<option value="{{ s }}">{{ s }}</option>{% endfor %}
        </select>
      </div>
      <div class="form-group">
        <label>Playbook</label>
        <select name="playbook_path" id="hp-playbook" required
                hx-get="/ansible/playbook-vars" hx-trigger="change"
                hx-target="#hp-vars" hx-swap="innerHTML" hx-include="closest form">
        </select>
      </div>
      <div id="hp-vars"></div>
      <details style="margin:0.25rem 0 0.75rem;">
        <summary style="cursor:pointer;font-size:0.82rem;color:var(--text-muted);">Advanced</summary>
        <div class="form-group" style="margin-top:0.6rem;">
          <label>Extra vars <span style="color:var(--text-muted);font-weight:normal;">(one key=value per line)</span></label>
          <textarea name="extra_vars" rows="2" style="width:100%;font-family:ui-monospace,monospace;font-size:0.85rem;"></textarea>
        </div>
        <div class="form-group">
          <label>Tags <span style="color:var(--text-muted);font-weight:normal;">(--tags)</span></label>
          <input type="text" name="tags" placeholder="deploy,config">
        </div>
        <div class="form-group">
          <label style="display:flex;align-items:center;gap:0.5rem;font-weight:normal;">
            <input type="checkbox" name="check"> Dry-run (--check --diff)
          </label>
        </div>
      </details>
      <button type="submit" class="btn btn-sm">Run playbook</button>
    </form>
  </details>
  {% endif %}
  {% else %}
  <p style="color:var(--text-muted);font-size:0.88rem;margin-bottom:1rem;">
    No Ansible target linked. A target gives this host an SSH connection so Steward can
    run playbooks and provision the agent.
  </p>
  <div style="display:flex;gap:0.75rem;flex-wrap:wrap;align-items:flex-end;">
    {% if linkable_targets %}
    <form method="post" action="/hosts/{{ host.id }}/ansible-link" style="display:flex;gap:0.5rem;align-items:center;">
      <input type="hidden" name="action" value="link">
      <select name="target_id">
        {% for tgt in linkable_targets %}<option value="{{ tgt.id }}">{{ tgt.name }} ({{ tgt.address }})</option>{% endfor %}
      </select>
      <button type="submit" class="btn btn-sm">Link</button>
    </form>
    {% endif %}
    <form method="post" action="/hosts/{{ host.id }}/ansible-link" style="margin:0;">
      <input type="hidden" name="action" value="create">
      <button type="submit" class="btn btn-sm btn-ghost">Create target from this host</button>
    </form>
  </div>
  {% endif %}
</div>{# Ansible card #}

{# ── Docker (docker plugin fragment; renders nothing if the host has none) ──── #}
{% if "docker" in enabled_plugins %}
<div hx-get="/plugins/docker/host/{{ host.id }}" hx-trigger="load" hx-swap="innerHTML"></div>
{% endif %}

{# ── SNMP (renders nothing unless a configured SNMP device maps to this host) ── #}
{% if "snmp" in enabled_plugins %}
<div hx-get="/plugins/snmp/host/{{ host.id }}" hx-trigger="load" hx-swap="innerHTML"></div>
{% endif %}

{{ toggle_script() }}
<script>var _mt=document.getElementById('mtype'); if(_mt) mtoggle(_mt.value);</script>
{% endblock %}