{{define "content"}}
<div class="inventory-shell d-flex">
  <aside id="tree-pane" class="tree-pane border-end d-flex flex-column">
    <div class="p-2 border-bottom">
      <div class="input-group input-group-sm">
        <span class="input-group-text"><i class="bi bi-search"></i></span>
        <input type="search" id="tree-search" class="form-control" placeholder="Search inventory&hellip;">
        <button class="btn btn-outline-secondary" id="btn-expand-all" title="Expand all folders"><i class="bi bi-arrows-expand"></i></button>
        <button class="btn btn-outline-secondary" id="btn-collapse-all" title="Collapse all folders"><i class="bi bi-arrows-collapse"></i></button>
      </div>
      <div class="form-text">Right-click the tree to add, rename, or delete.</div>
    </div>
    <div class="tree-scroll flex-fill overflow-auto">
      <ul class="tree list-unstyled mb-0" id="tree-root">
        <li class="tree-node tree-node-root" data-type="root">
          <div class="tree-row selected" data-type="root" tabindex="0">
            <span class="tree-toggle-spacer"></span>
            <i class="bi bi-house-door-fill tree-icon text-primary"></i>
            <span class="tree-label">Inventory</span>
          </div>
        </li>
        <li>
          <ul class="tree-children list-unstyled" id="top-level-children" data-expanded="true">
            {{template "tree_children" .Tree}}
          </ul>
        </li>
      </ul>
    </div>
  </aside>

  <section id="main-panel" class="main-panel flex-fill overflow-auto" data-context-type="root" data-context-id="">
    {{template "panel_root" .Root}}
  </section>
</div>

{{template "modals" .}}
{{end}}