{% extends "base.html" %}
{# Fleet, organized by site (Wes, 2026-09-28: "Fleet but site organized").
   Data: /api/fleet/sites, /api/fleet/devices, /api/fleet/discovered,
   /api/fleet/credential-profiles; bulk writes: /api/sites-web/*. #}
{% block title %}Fleet{% endblock %}
{% block page_id %}fleet{% endblock %}
{% block content %}
<div class="a-page-head">
  <h1><i class="fa-solid fa-sitemap" aria-hidden="true"></i> Fleet</h1>
  <button class="a-btn a-btn--primary" type="button" id="f-scan"><i class="fa-solid fa-magnifying-glass-location" aria-hidden="true"></i><span>Scan a network</span></button>
  <button class="a-btn" type="button" id="f-add"><i class="fa-solid fa-plus" aria-hidden="true"></i><span>Add device</span></button>
  <button class="a-btn a-btn--icon" type="button" id="f-more" aria-label="More fleet pages"><i class="fa-solid fa-ellipsis-vertical" aria-hidden="true"></i></button>
  <div class="a-sub">Every device, organized by site. A site's sign-ins are used by the devices in it and every site below it.</div>
</div>

<div id="f-banners"></div>

<div class="a-stats" id="f-stats">
  <div class="a-stat"><b id="f-stat-total">-</b><span>Devices</span></div>
  <div class="a-stat"><b id="f-stat-online">-</b><span>Online</span></div>
  <div class="a-stat"><b id="f-stat-offline">-</b><span>Offline or unknown</span></div>
  <div class="a-stat"><b id="f-stat-sites">-</b><span>Sites</span></div>
</div>

<div class="a-split">
  <aside class="a-card a-sticky" id="f-tree-card" aria-label="Sites">
    <div class="a-card-head">
      <h2>Sites</h2>
      <button class="a-btn a-btn--sm" type="button" id="f-new-site"><i class="fa-solid fa-folder-plus" aria-hidden="true"></i><span>New site</span></button>
    </div>
    <div id="f-tree"><div class="a-skel" style="height:120px"></div></div>
  </aside>

  <section class="a-col" aria-label="Devices">
    <div class="a-card" id="f-scope-card">
      <div class="a-row">
        <button class="a-btn a-btn--sm" type="button" id="f-pick-site"><i class="fa-solid fa-sitemap" aria-hidden="true"></i><span>Pick a site</span></button>
        <div class="a-grow a-col a-gap-sm">
          <h2 id="f-scope-title">All devices</h2>
          <div class="a-small a-muted" id="f-scope-sub"></div>
        </div>
        <div class="a-row" id="f-site-actions"></div>
      </div>
    </div>

    <div class="a-card" id="f-signins" hidden></div>

    <div class="a-card">
      <div class="a-toolbar">
        <label class="a-search a-grow" style="min-width:180px">
          <i class="fa-solid fa-magnifying-glass" aria-hidden="true"></i>
          <input class="a-input" type="search" id="f-q" placeholder="Search name, address, MAC, vendor" aria-label="Search devices">
        </label>
        <select class="a-select" id="f-status" aria-label="Status" style="width:auto">
          <option value="">Any status</option>
          <option value="online">Online</option>
          <option value="offline">Offline</option>
          <option value="unknown">Unknown</option>
        </select>
        <select class="a-select" id="f-cat" aria-label="Category" style="width:auto">
          <option value="">Any kind</option>
        </select>
        <label class="a-check a-small" id="f-sub-wrap"><input type="checkbox" id="f-sub" checked> Sub-sites</label>
        <button class="a-btn a-btn--sm" type="button" id="f-select" aria-pressed="false"><i class="fa-regular fa-square-check" aria-hidden="true"></i><span>Select</span></button>
      </div>
      <div class="a-sr" id="f-count" role="status" aria-live="polite"></div>
      <div class="a-list" id="f-list"><div class="a-skel" style="height:220px"></div></div>
      <div class="a-row" style="justify-content:center;margin-top:10px" id="f-more-rows"></div>
    </div>

    <div class="a-selbar" id="f-selbar" hidden>
      <b id="f-sel-count">0 selected</b>
      <button class="a-btn a-btn--sm" type="button" id="f-sel-all">All shown</button>
      <span class="a-grow"></span>
      <button class="a-btn a-btn--sm" type="button" id="f-sel-move"><i class="fa-solid fa-right-to-bracket" aria-hidden="true"></i><span>Move to site</span></button>
      <button class="a-btn a-btn--sm" type="button" id="f-sel-cat"><i class="fa-solid fa-tag" aria-hidden="true"></i><span>Label</span></button>
      <button class="a-btn a-btn--sm" type="button" id="f-sel-find"><i class="fa-solid fa-key" aria-hidden="true"></i><span>Find logins</span></button>
      <button class="a-btn a-btn--sm a-btn--danger" type="button" id="f-sel-remove"><i class="fa-solid fa-trash" aria-hidden="true"></i><span>Remove</span></button>
      <button class="a-btn a-btn--sm a-btn--ghost" type="button" id="f-sel-clear" aria-label="Clear selection"><i class="fa-solid fa-xmark" aria-hidden="true"></i></button>
    </div>
  </section>
</div>
{% endblock %}
{% block scripts %}
<style>
  .f-row-link { color: var(--text); }
  .f-row-link:hover { text-decoration: none; color: var(--accent); }
  .f-sitecolor { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex: none; }
  .f-cred { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--line); }
  .f-cred:last-child { border-bottom: 0; }
  @media (max-width: 899px) { #f-tree-card { display: none; } #f-pick-site { display: inline-flex; } }
  @media (min-width: 900px) { #f-pick-site { display: none !important; } }
</style>
<script src="{{ aida_rel('static/js/fleet_sites.js') }}"></script>
{% endblock %}