{% extends "base.html" %}
{% block title %}Fleet & assets · SD RMM{% endblock %}
{% block content %}

<style>
  .iv-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(3,1fr); gap:12px; margin-bottom:14px; }
  @media (max-width:680px){ .kpis { grid-template-columns: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 .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); margin-bottom:14px; }
  .card h2 { font-size:13px; font-weight:700; margin:0 0 12px; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); }
  .search { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:6px; }
  .search input[type=text] { flex:1; min-width:220px; background:var(--surface-2); border:1px solid var(--line); color:var(--ink); border-radius:8px; padding:8px 12px; font:inherit; }
  table.iv { width:100%; border-collapse:collapse; font-size:13px; }
  table.iv 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.iv td { padding:7px 8px; border-bottom:1px solid var(--line-soft); }
  table.iv 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); background:var(--surface-3); border:1px solid var(--line); }
  .muted { color:var(--muted); }
</style>

<div class="iv-head">
  <div>
    <h1 class="page-title" style="margin-bottom:2px;">Fleet &amp; assets</h1>
    <p class="muted" style="margin:0;">Your devices, and the software installed on them. Search a package to see which devices have it.</p>
  </div>
</div>

<div class="card">
  <h2>Devices ({{ fleet_devices|length }})</h2>
  <table class="iv">
    <thead><tr><th>Host</th><th>Organization</th><th>OS</th><th>Last seen</th></tr></thead>
    <tbody>
      {% for a in fleet_devices %}
      <tr>
        <td>
          <span style="display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px;vertical-align:middle;background:{{ 'var(--ok)' if a.last_seen_at and a.last_seen_at >= online_cutoff else 'var(--muted-2)' }};"></span>
          <a href="/orgs/{{ a.org_id }}/agents/{{ a.id }}"><strong>{{ a.hostname }}</strong></a>
        </td>
        <td class="muted">{{ dev_org.get(a.org_id, '—') }}</td>
        <td class="muted">{{ a.os }} {{ a.os_version or '' }}</td>
        <td class="muted" style="white-space:nowrap;">{{ a.last_seen_at | pt('%m-%d %H:%M') if a.last_seen_at else 'never' }}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>

<div class="kpis">
  <div class="kpi"><div class="v">{{ devices_reporting }}</div><div class="k">Devices reporting</div></div>
  <div class="kpi"><div class="v">{{ "{:,}".format(distinct_pkgs) }}</div><div class="k">Distinct packages</div></div>
  <div class="kpi"><div class="v">{{ grouped|length }}{% if grouped|length >= 400 %}+{% endif %}</div><div class="k">Matches shown</div></div>
</div>

<div class="card">
  <form class="search" method="get" action="/inventory">
    <input type="text" name="q" value="{{ q }}" placeholder="Search package name (e.g. Chrome, openssl, 7-Zip)…" autofocus>
    <button class="btn btn-primary" type="submit">Search</button>
    {% if q %}<a class="btn btn-ghost" href="/inventory">Clear</a>{% endif %}
  </form>

  {% if detail %}
  <h2 style="margin-top:14px;">&ldquo;{{ detail.pkg }}&rdquo; &mdash; {{ detail.rows|length }} device(s)</h2>
  {% if detail.rows %}
  <table class="iv">
    <thead><tr><th>Device</th><th>Organization</th><th>Version</th><th>Source</th></tr></thead>
    <tbody>
      {% for r in detail.rows %}
      <tr>
        <td><a href="/orgs/{{ r.agent.org_id }}/agents/{{ r.agent.id }}/software"><strong>{{ r.agent.hostname }}</strong></a></td>
        <td class="muted">{{ r.org_name }}</td>
        <td class="mono">{{ r.version or '—' }}</td>
        <td><span class="pill">{{ r.source or '—' }}</span></td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  {% else %}<p class="muted">No devices have this package.</p>{% endif %}
  <p style="margin-top:10px;"><a class="btn btn-ghost" href="/inventory{% if q %}?q={{ q|urlencode }}{% endif %}">&lsaquo; Back to results</a></p>

  {% else %}
  <h2 style="margin-top:14px;">{% if q %}Packages matching &ldquo;{{ q }}&rdquo;{% else %}All packages{% endif %}</h2>
  {% if grouped %}
  <table class="iv">
    <thead><tr><th>Package</th><th class="num">Devices</th><th></th></tr></thead>
    <tbody>
      {% for g in grouped %}
      <tr>
        <td><strong>{{ g.name }}</strong></td>
        <td class="num">{{ g.devices }}</td>
        <td class="num"><a class="muted" href="/inventory?pkg={{ g.name|urlencode }}{% if q %}&q={{ q|urlencode }}{% endif %}">view devices &rsaquo;</a></td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  {% if grouped|length >= 400 %}<p class="muted" style="margin-top:8px;">Showing the top 400 packages — refine your search to narrow down.</p>{% endif %}
  {% else %}
  <p class="muted">{% if q %}No packages match &ldquo;{{ q }}&rdquo;.{% else %}No software reported yet. Devices report their inventory within ~2 minutes of the agent (v0.4.4+) starting, then every 6h.{% endif %}</p>
  {% endif %}
  {% endif %}
</div>

{% endblock %}