{{define "panel_root"}}
<div class="panel-content p-3" data-panel-type="root">
  <nav aria-label="breadcrumb">
    <ol class="breadcrumb mb-2">
      <li class="breadcrumb-item active" aria-current="page" data-type="root">Inventory</li>
    </ol>
  </nav>

  <div class="row g-2 mb-3">
    <div class="col-6 col-md-2">
      <div class="card stat-card">
        <div class="card-body py-2">
          <div class="stat-value">{{.Stats.Total}}</div>
          <div class="stat-label">Total Assets</div>
        </div>
      </div>
    </div>
    {{range .Stats.ByStatus}}
    <div class="col-6 col-md-2">
      <div class="card stat-card">
        <div class="card-body py-2">
          <div class="stat-value">{{.Count}}</div>
          <div class="stat-label"><span class="badge text-bg-{{.Color}}">{{.Name}}</span></div>
        </div>
      </div>
    </div>
    {{end}}
  </div>

  <div class="row g-3 mb-3">
    <div class="col-md-6">
      <div class="card h-100">
        <div class="card-header py-2 fw-semibold">Assets by Type</div>
        <ul class="list-group list-group-flush">
          {{range .Stats.ByType}}
          <li class="list-group-item d-flex justify-content-between align-items-center py-1">
            <span><i class="bi {{iconOr .Icon "bi-box-seam"}} me-2"></i>{{.Name}}</span>
            <span class="badge text-bg-secondary rounded-pill">{{.Count}}</span>
          </li>
          {{else}}
          <li class="list-group-item text-body-secondary py-2">No assets yet.</li>
          {{end}}
        </ul>
      </div>
    </div>
    <div class="col-md-6">
      <div class="card h-100">
        <div class="card-header py-2 fw-semibold">Recently Added</div>
        <ul class="list-group list-group-flush">
          {{range .Stats.RecentlyAdded}}
          <li class="list-group-item py-1">
            <a href="#" class="asset-link text-decoration-none" data-id="{{.ID}}">
              <i class="bi {{iconOr .ItemTypeIcon "bi-box-seam"}} me-2"></i>{{.Name}}
              <span class="text-body-secondary small">{{.AssetTag}}</span>
            </a>
          </li>
          {{else}}
          <li class="list-group-item text-body-secondary py-2">No assets yet.</li>
          {{end}}
        </ul>
      </div>
    </div>
  </div>

  <h6 class="mb-2">Top-Level Folders</h6>

  {{if .Folders}}
  <div class="list-group mb-3">
    {{range .Folders}}
    <a href="#" class="list-group-item list-group-item-action folder-link d-flex align-items-center" data-id="{{.ID}}">
      <i class="bi {{iconOr .Icon "bi-folder-fill"}} text-warning-emphasis me-2"></i>
      {{.Name}}
      <span class="text-body-secondary small ms-2">{{if .Description}}{{.Description}}{{end}}</span>
      <span class="ms-auto text-body-secondary small">{{.FolderCount}} folder(s), {{.AssetCount}} asset(s)</span>
    </a>
    {{end}}
  </div>
  {{else}}
  <p class="text-body-secondary">No folders yet. <span class="admin-only">Right-click here (or the tree) to create one.</span></p>
  {{end}}

  {{if .UnfiledAssets}}
  <h6 class="mb-2">Unfiled Assets</h6>
  <div class="table-responsive">
    <table class="table table-sm table-hover asset-table">
      <thead><tr><th>Asset ID</th><th>Name</th><th>Type</th><th>Status</th><th>Assigned</th></tr></thead>
      <tbody>
        {{range .UnfiledAssets}}
        <tr class="asset-row" data-id="{{.ID}}">
          <td>{{.AssetTag}}</td>
          <td><i class="bi {{iconOr .ItemTypeIcon "bi-box-seam"}} me-1"></i>{{.Name}}</td>
          <td>{{.ItemTypeName}}</td>
          <td><span class="badge text-bg-{{.StatusColor}}">{{.StatusName}}</span></td>
          <td>{{if .AssignedUsername}}{{.AssignedUsername}}{{else}}<span class="text-body-secondary">&mdash;</span>{{end}}</td>
        </tr>
        {{end}}
      </tbody>
    </table>
  </div>
  {{end}}
</div>
{{end}}