{{define "tree_children"}}
{{range .}}
  {{if eq .Type "folder"}}
  <li class="tree-node" data-type="folder" data-id="{{.ID}}" draggable="true">
    <div class="tree-row" data-type="folder" data-id="{{.ID}}" tabindex="0">
      {{if .HasChildren}}
      <button type="button" class="tree-toggle{{if .Expanded}} expanded{{end}}" data-id="{{.ID}}" aria-label="Toggle">
        <i class="bi bi-chevron-right"></i>
      </button>
      {{else}}
      <span class="tree-toggle-spacer"></span>
      {{end}}
      <i class="bi {{iconOr .Icon "bi-folder-fill"}} tree-icon text-warning-emphasis"></i>
      <span class="tree-label">{{.Name}}</span>
    </div>
    <ul class="tree-children list-unstyled{{if not .Expanded}} d-none{{end}}" data-expanded="{{.Expanded}}" data-loaded="{{.Expanded}}">
      {{if .Expanded}}{{template "tree_children" .Children}}{{end}}
    </ul>
  </li>
  {{else if eq .Type "asset"}}
  <li class="tree-node" data-type="asset" data-id="{{.ID}}" draggable="true">
    <div class="tree-row" data-type="asset" data-id="{{.ID}}" tabindex="0">
      <span class="tree-toggle-spacer"></span>
      <i class="bi {{iconOr .Icon "bi-box-seam"}} tree-icon text-body-secondary"></i>
      <span class="tree-label">{{.Name}}</span>
      <span class="badge rounded-pill text-bg-{{.StatusColor}} tree-status-badge">{{.StatusName}}</span>
    </div>
  </li>
  {{else}}
  <li class="tree-node tree-node-more">
    <div class="tree-row tree-row-more text-body-secondary fst-italic">
      <span class="tree-toggle-spacer"></span>
      <i class="bi bi-three-dots"></i>
      <span class="tree-label">{{.Name}}</span>
    </div>
  </li>
  {{end}}
{{end}}
{{end}}