{% extends "base.html" %}
{% block title %}Patching · SD RMM{% endblock %}
{% block content %}

<style>
  .pf-head { display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:10px; margin-bottom:8px; }
  .kpis { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-bottom:14px; }
  @media (max-width:820px){ .kpis { grid-template-columns:repeat(2,1fr); } }
  .kpi { background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-md); padding:12px 14px; }
  .kpi .v { font:700 22px/1 var(--font-sans); font-variant-numeric:tabular-nums; }
  .kpi .v.warn { color:var(--warn); } .kpi .v.bad { color:#fca5a5; }
  .kpi .k { font-size:10px; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); font-weight:700; margin-top:6px; }
  .card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:16px; box-shadow:var(--shadow-1); }
  table.pf { width:100%; border-collapse:collapse; font-size:13px; }
  table.pf th { text-align:left; color:var(--muted); font-weight:600; font-size:10.5px; text-transform:uppercase; letter-spacing:.4px; padding:7px 8px; border-bottom:1px solid var(--line); }
  table.pf td { padding:8px; border-bottom:1px solid var(--line-soft); }
  table.pf td.num { text-align:right; font-variant-numeric:tabular-nums; }
  .pill { display:inline-block; padding:2px 9px; border-radius:999px; font:700 11px/1.6 var(--font-sans); }
  .pill.ok { background:rgba(74,222,128,.14); color:var(--ok); } .pill.warn { background:rgba(251,191,36,.16); color:var(--warn); }
  .pill.bad { background:rgba(249,115,115,.14); color:#fca5a5; } .pill.muted { background:var(--surface-3); color:var(--muted); }
  .muted { color:var(--muted); }
</style>

<div class="pf-head">
  <div>
    <h1 class="page-title" style="margin-bottom:2px;">Patching</h1>
    <p class="muted" style="margin:0;">Pending OS updates across the fleet. Click a device to scan or apply.</p>
  </div>
  {% if user.is_super_admin %}<div><a class="btn btn-ghost" href="/security/schedule">&#9881;&#65039; Auto-patch schedule</a></div>{% endif %}
</div>

<div class="kpis">
  <div class="kpi"><div class="v">{{ kpis.scanned }}<span class="muted" style="font-size:14px;">/{{ kpis.devices }}</span></div><div class="k">Devices scanned</div></div>
  <div class="kpi"><div class="v {{ 'warn' if kpis.available else '' }}">{{ kpis.available }}</div><div class="k">Updates pending</div></div>
  <div class="kpi"><div class="v {{ 'bad' if kpis.security else '' }}">{{ kpis.security }}</div><div class="k">Security updates</div></div>
  <div class="kpi"><div class="v {{ 'bad' if kpis.reboots else '' }}">{{ kpis.reboots }}</div><div class="k">Awaiting reboot</div></div>
  <div class="kpi"><div class="v">{{ kpis.devices }}</div><div class="k">Total devices</div></div>
</div>

<div class="card">
  {% if rows %}
  <table class="pf">
    <thead><tr><th>Device</th><th>Organization</th><th>OS</th><th class="num">Available</th><th class="num">Security</th><th>Reboot</th><th>Last scan (PT)</th></tr></thead>
    <tbody>
      {% for r in rows %}
      <tr>
        <td><a href="/orgs/{{ r.agent.org_id }}/agents/{{ r.agent.id }}/patches"><strong>{{ r.agent.hostname }}</strong></a></td>
        <td class="muted">{{ r.org_name }}</td>
        <td class="muted">{{ r.agent.os }} {{ r.agent.os_version or '' }}</td>
        {% if r.st %}
          <td class="num">{% if r.st.available %}<span class="pill warn">{{ r.st.available }}</span>{% else %}<span class="pill ok">0</span>{% endif %}</td>
          <td class="num">{% if r.st.security %}<span class="pill bad">{{ r.st.security }}</span>{% else %}<span class="muted">0</span>{% endif %}</td>
          <td>{% if r.st.reboot_required %}<span class="pill bad">required</span>{% else %}<span class="muted">no</span>{% endif %}</td>
          <td class="mono muted">{{ r.st.last_scan_at| pt('%m-%d %H:%M') }}</td>
        {% else %}
          <td class="num muted">—</td><td class="num muted">—</td><td><span class="pill muted">not scanned</span></td><td class="muted">never</td>
        {% endif %}
      </tr>
      {% endfor %}
    </tbody>
  </table>
  {% else %}
  <p class="muted">No devices yet. Once agents (v0.4.5+) check in they report patch status within a few minutes.</p>
  {% endif %}
</div>

{% endblock %}