{{>
  function treeToContent(tree) {
    return Array.from([
      ...tree.folders?.entries() || [],
      ...tree.files?.entries() || [],
    ]).sort(([a], [b]) => a.localeCompare(b));
  }
}}

{{ layout "layout.vto" { title: upload.label } }}
  {{ function folder(upload, content) }}
    {{ for entry of content }}
      {{> const [name, child] = entry }}

      {{ if "label" in child /* It's a file */ }}
        <li>
          <a
            href='{{ ["uploads", upload.name, child.name, "edit"] |> path }}'
            class="list-item"
            title="{{ child.label |> escape }}"
          >
            {{ if child.icon }}
              <u-icon name="{{ child.icon }}"></u-icon>
            {{ else }}
              <u-icon-file path="{{child.name}}"></u-icon-file>
            {{ /if }}
            {{ name }}
            {{ for key, value of child.flags }}
              <span title="{{ key }}" class="tag">{{ value }}</span>
            {{ /for }}
          </a>
          <u-popover>
            <button class="buttonIcon" type="button">
              <u-icon name="eye"></u-icon>
            </button>
            <template>
              <u-preview
                id="preview_{{file}}"
                data-src='{{ ["uploads", upload.name, child.name] |> path }}'
              >
              </u-preview>
            </template>
          </u-popover>
          <u-copy
            text="{{ [upload.publicPath, child.name] |> normalizePath }}"
          ></u-copy>
        </li>
      {{ else }}
        <li>
          {{ set subContent = treeToContent(child) }}
          <details class="accordion is-folder">
            <summary title="{{ subContent.length }} item(s)">
              {{ name }}
            </summary>
            <ul>
              {{ folder(upload, subContent) }}
            </ul>
          </details>
          <div class="list-actions">
            <a
              href='{{ ["uploads", upload.name, "create"] |> path }}?folder={{child.path}}'
              title='{{ t("uploads.list.action.create", { folder: name }) }}'
              class="buttonIcon"
            >
              <u-icon name="plus-circle"></u-icon>
            </a>
          </div>
        </li>
      {{ /if }}
    {{ /for }}
  {{ /function }}

  <header class="header">
    {{ include "breadcrumb.vto" }}

    <h1 class="header-title">{{ upload.label }}</h1>

    {{ if upload.description }}
      <p class="header-description">{{ upload.description }}</p>
    {{ /if }}
  </header>

  {{ set content = folder(upload, treeToContent(tree)).trim() }}

  {{ if content }}
    <u-filter
      data-placeholder="Search files in {{upload.label}}"
      data-selector="#list li"
    >
    </u-filter>
  {{ /if }}

  <nav class="navigation">
    {{ if user.canCreate(upload) }}
      <a
        href='{{ ["uploads", upload.name, "create"] |> path }}'
        class="button is-primary"
      >
        <u-icon name="plus-circle"></u-icon>
        {{ t("uploads.list.action.add") }}
      </a>
    {{ /if }}
  </nav>

  {{ if content }}
    <u-tree data-name="upload-{{ upload.name}}">
      <ul id="list" class="list">{{ content }}</ul>
    </u-tree>
  {{ else }}
    <p class="emptyState">{{ t("uploads.list.empty") }}</p>
  {{ /if }}
{{ /layout }}