{{define "tree_node"}}
{{$page := .Page}}
{{if $page.Error}}
  <div class="px-3 py-2 mono text-[12px] text-bad">error: {{$page.Error}}</div>
{{else}}
  <div class="flex items-center gap-2 px-3 py-1.5 text-[12px] text-ink-mute border-b border-line-soft">
    <span class="mono text-ink-mid">{{$page.Path}}</span>
    {{if not $page.Children}}
      <span class="text-ink-fade ml-auto mono text-[11px]">empty directory</span>
    {{end}}
  </div>
  {{range $page.Children}}
    <div class="tree-pair">
      <div class="grid items-center gap-2 px-3 py-[5px] mono text-[12.5px] border-b border-line-soft"
           style="grid-template-columns: 14px 16px auto 1fr auto;">
        {{if .IsDir}}
          <button type="button"
                  class="tree-toggle text-ink-mute text-[10px] cursor-pointer"
                  data-tree-url="/hosts/{{$page.HostID}}/restore/tree?snapshot={{$page.SnapshotID}}&path={{.Path}}"
                  data-loaded="false"
                  onclick="window.__rmTreeToggle(this)">▸</button>
        {{else}}
          <span class="text-ink-fade text-center">·</span>
        {{end}}
        <label class="cursor-pointer flex items-center justify-center">
          <input type="checkbox" name="paths" value="{{.Path}}"
                 class="w-[13px] h-[13px] cursor-pointer" />
        </label>
        <span class="{{if .IsDir}}text-ink{{else}}text-ink-mid{{end}}">{{.Name}}{{if .IsDir}}/{{end}}</span>
        <span></span>
        <span class="text-[11px] text-ink-fade">{{if not .IsDir}}{{if .Size}}{{bytes .Size}}{{else}}—{{end}}{{end}}</span>
      </div>
      {{if .IsDir}}
        <div class="tree-children hidden pl-5 border-l border-line-soft ml-5"></div>
      {{end}}
    </div>
  {{end}}
{{end}}
{{end}}