{{define "browse.html"}}{{template "base.html" .}}{{end}}

{{define "title"}}{{.Bucket}}/{{.Prefix}}{{end}}

{{define "content"}}

  <nav class="crumbs">

    <a href="/buckets">buckets</a>

    {{range .Crumbs}}<span class="crumb-sep">/</span><a href="{{.Href}}">{{.Label}}</a>{{end}}

    <span class="crumb-sep">/</span>

  </nav>

  {{if .Error}}<p class="error">{{.Error}}</p>{{end}}

  {{if .Success}}<p class="success">{{.Success}}</p>{{end}}

  <div class="search-row">

    <input type="search" id="filter" placeholder="filter folders + files in this view…" autocomplete="off">

    <span class="filter-count" id="filter-count"></span>

  </div>

  <div class="actions-row">

    <form method="POST" action="/b/{{.Bucket}}/upload" enctype="multipart/form-data" class="form inline-actions">

      <input type="hidden" name="prefix" value="{{.Prefix}}">

      <label for="file">upload (max {{.MaxUploadMB}}MB, multiple allowed)</label>

      <input type="file" id="file" name="file" multiple required>

      <button type="submit">upload</button>

    </form>

    <form method="POST" action="/b/{{.Bucket}}/mkdir" class="form inline-actions">

      <input type="hidden" name="prefix" value="{{.Prefix}}">

      <label for="name">new folder</label>

      <input type="text" id="name" name="name" placeholder="folder-name" required>

      <button type="submit">create</button>

    </form>

  </div>

  {{if and (not .Folders) (not .Files) (not .ParentHref)}}

    <p class="empty">empty bucket</p>

  {{end}}

  <div class="admin-list" id="entry-list">

    {{if .ParentHref}}

      <a href="{{.ParentHref}}" class="admin-list-item" data-parent="1">

        <div class="admin-list-info">

          <span class="admin-list-title">../</span>

        </div>

      </a>

    {{end}}

    {{range .Folders}}

      <a href="{{.Href}}" class="admin-list-item" data-name="{{.Name}}">

        <div class="admin-list-info">

          <span class="admin-list-title">{{.Name}}/</span>

        </div>

      </a>

    {{end}}

    {{range .Files}}

      <a href="{{.DetailHref}}" class="admin-list-item" data-name="{{.Name}}">

        {{if .IsImage}}<img src="{{.PreviewSrc}}" class="file-thumbnail" alt="{{.Name}}" loading="lazy">{{end}}

        <div class="admin-list-info">

          <span class="admin-list-title">{{.Name}}</span>

          <div class="admin-list-meta">

            <span class="admin-list-date">{{.SizeHuman}}</span>

            <span class="admin-list-date">{{.LastModified}}</span>

          </div>

        </div>

      </a>

    {{end}}

  </div>

  <script>

    (function () {

      var input = document.getElementById('filter');

      var list = document.getElementById('entry-list');

      var count = document.getElementById('filter-count');

      if (!input || !list) return;

      var items = list.querySelectorAll('.admin-list-item[data-name]');

      var total = items.length;

      function apply() {

        var q = input.value.trim().toLowerCase();

        var shown = 0;

        items.forEach(function (el) {

          var name = (el.getAttribute('data-name') || '').toLowerCase();

          var match = q === '' || name.indexOf(q) !== -1;

          el.style.display = match ? '' : 'none';

          if (match) shown++;

        });

        count.textContent = q ? shown + ' / ' + total : '';

      }

      input.addEventListener('input', apply);

    })();

  </script>

{{end}}