{% extends "base.html" %}
{% block title %}Software · {{ agent.hostname }}{% endblock %}
{% block content %}

<style>
  .sw-head { display:flex; justify-content:space-between; align-items:flex-end; gap:14px; flex-wrap:wrap; margin-bottom:12px; }
  .card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:16px; box-shadow:var(--shadow-1); margin-bottom:14px; }
  .search { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
  .search input[type=text] { flex:1; min-width:200px; background:var(--surface-2); border:1px solid var(--line); color:var(--ink); border-radius:8px; padding:8px 12px; font:inherit; }
  table.sw { width:100%; border-collapse:collapse; font-size:13px; }
  table.sw 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.sw td { padding:7px 8px; border-bottom:1px solid var(--line-soft); }
  .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="sw-head">
  <div>
    <p class="crumb"><a href="/dashboard">Dashboard</a> &rsaquo; <a href="/orgs/{{ org.id }}">{{ org.name }}</a> &rsaquo; <a href="/orgs/{{ org.id }}/agents/{{ agent.id }}">{{ agent.hostname }}</a> &rsaquo;</p>
    <h1 class="page-title" style="margin-bottom:2px;">Installed Software</h1>
    <p class="muted" style="margin:0;">
      {{ total }} package(s) &middot;
      {% if collected_at %}last reported {{ collected_at| pt('%Y-%m-%d %H:%M') }}{% else %}not reported yet{% endif %}
    </p>
  </div>
  <div style="display:flex; gap:10px; align-items:center; flex-wrap:wrap;">
    <a class="btn btn-ghost" href="/orgs/{{ org.id }}/agents/{{ agent.id }}">&lsaquo; Device</a>
    <form method="post" action="/orgs/{{ org.id }}/agents/{{ agent.id }}/software/refresh">
      <button class="btn btn-primary" type="submit" title="Queue a fresh inventory scan (runs within ~15s)">Refresh inventory</button>
    </form>
  </div>
</div>

{% if last_cmd and (not collected_at or last_cmd.created_at > collected_at) and last_cmd.status in ('pending','sent') %}
<div class="card" style="border-color:rgba(251,191,36,.4); background:rgba(251,191,36,.07);">
  <strong>Refresh requested</strong> <span class="muted">&mdash; the agent will report its current software list on the next poll (~15s). Reload shortly.</span>
</div>
{% endif %}

<div class="card">
  <form class="search" method="get" action="/orgs/{{ org.id }}/agents/{{ agent.id }}/software">
    <input type="text" name="q" value="{{ q }}" placeholder="Filter installed software…">
    <button class="btn btn-primary" type="submit">Filter</button>
    {% if q %}<a class="btn btn-ghost" href="/orgs/{{ org.id }}/agents/{{ agent.id }}/software">Clear</a>{% endif %}
  </form>

  {% if items %}
  <p class="muted" style="font-size:12px; margin:0 0 8px;">Showing {{ shown }}{% if shown < total and not q %} of {{ total }}{% endif %} package(s){% if q %} matching &ldquo;{{ q }}&rdquo;{% endif %}.</p>
  <table class="sw">
    <thead><tr><th>Name</th><th>Version</th><th>Publisher</th><th>Source</th></tr></thead>
    <tbody>
      {% for s in items %}
      <tr>
        <td><strong>{{ s.name }}</strong></td>
        <td class="mono">{{ s.version or '—' }}</td>
        <td class="muted">{{ s.publisher or '—' }}</td>
        <td><span class="pill">{{ s.source or '—' }}</span></td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  {% else %}
  <p class="muted">
    {% if q %}No installed software matches &ldquo;{{ q }}&rdquo;.
    {% else %}No software reported yet. The agent (v0.4.4+) reports its inventory ~2 min after starting and every 6h &mdash; or hit <strong>Refresh inventory</strong> to pull it now.{% endif %}
  </p>
  {% endif %}
</div>

{% endblock %}