{{define "panel_folder"}}
<div class="panel-content p-3" data-folder-id="{{.Folder.ID}}">
  <div class="d-flex align-items-start mb-2">
    {{template "breadcrumb" .Breadcrumb}}
    <div class="ms-auto d-flex gap-2 admin-only">
      <button class="btn btn-sm btn-outline-secondary" data-action="new-subfolder" data-id="{{.Folder.ID}}"><i class="bi bi-folder-plus"></i> Subfolder</button>
      <button class="btn btn-sm btn-outline-secondary" data-action="rename-folder" data-id="{{.Folder.ID}}" data-name="{{.Folder.Name}}" data-description="{{.Folder.Description}}" data-icon="{{.Folder.Icon}}" data-sort-order="{{.Folder.SortOrder}}"><i class="bi bi-pencil"></i> Rename</button>
      <button class="btn btn-sm btn-outline-danger" data-action="delete-folder" data-id="{{.Folder.ID}}"><i class="bi bi-trash"></i> Delete</button>
    </div>
  </div>

  <h4 class="mb-1"><i class="bi {{iconOr .Folder.Icon "bi-folder-fill"}} text-warning-emphasis me-1"></i>{{.Folder.Name}}</h4>
  {{if .Folder.Description}}<p class="text-body-secondary">{{.Folder.Description}}</p>{{end}}

  {{if .Subfolders}}
  <h6 class="mt-3 mb-2">Subfolders</h6>
  <div class="list-group mb-3">
    {{range .Subfolders}}
    <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="ms-auto text-body-secondary small">{{.FolderCount}} folder(s), {{.AssetCount}} asset(s)</span>
    </a>
    {{end}}
  </div>
  {{end}}

  <div class="d-flex align-items-center flex-wrap gap-2 mt-3 mb-2">
    <h6 class="mb-0 me-2">Assets</h6>
    <form class="d-flex gap-2 flex-wrap align-items-center panel-filter-form" data-folder-id="{{.Folder.ID}}">
      <select class="form-select form-select-sm" name="item_type_id" style="width:auto">
        <option value="">All Types</option>
        {{range .ItemTypes}}<option value="{{.ID}}" {{if eq .ID $.FilterType}}selected{{end}}>{{.Name}}</option>{{end}}
      </select>
      <select class="form-select form-select-sm" name="status_id" style="width:auto">
        <option value="">All Statuses</option>
        {{range .Statuses}}<option value="{{.ID}}" {{if eq .ID $.FilterStat}}selected{{end}}>{{.Name}}</option>{{end}}
      </select>
      <input type="search" class="form-control form-control-sm" name="q" value="{{.Query}}" placeholder="Filter assets&hellip;" style="width:160px">
    </form>
    <div class="ms-auto d-flex gap-2">
      <a class="btn btn-sm btn-outline-secondary" href="/export/assets.csv?folder_id={{.Folder.ID}}&recursive=1"><i class="bi bi-download"></i> Export</a>
      <button class="btn btn-sm btn-primary admin-only" data-action="new-asset" data-folder-id="{{.Folder.ID}}"><i class="bi bi-plus-lg"></i> Add Asset</button>
    </div>
  </div>

  {{if .Assets}}
  <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 .Assets}}
        <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>
  {{$pages := ceilDiv .Total .PageSize}}
  {{if gt $pages 1}}
  <nav>
    <ul class="pagination pagination-sm">
      {{range $i := seqFrom1 $pages}}
      <li class="page-item {{if eq $i $.Page}}active{{end}}">
        <a class="page-link panel-page-link" href="#" data-folder-id="{{$.Folder.ID}}" data-page="{{$i}}">{{$i}}</a>
      </li>
      {{end}}
    </ul>
  </nav>
  {{end}}
  {{else}}
  <p class="text-body-secondary">No assets in this folder yet.</p>
  {{end}}
</div>
{{end}}