{{define "title"}}{{t "Files"}} · {{.Blog.Title}}{{end}}
{{define "content"}}
{{$b := .Blog.Subdomain}}
<div class="pagehead">
  <h1>{{t "Files"}}</h1>
  <p class="lead muted">{{t "Files are stored with your blog. Put one in a post with"}} <em>{{t "Insert file"}}</em> {{t "in the editor, or copy its line from the table."}} {{tf "%d files, %s in use." .Data.count (size .Data.bytes)}}</p>
</div>
<div class="card dropzone" id="dropzone">
  <form method="post" action="/b/{{$b}}/files/upload" enctype="multipart/form-data" id="upload-form">
    <input type="hidden" name="_csrf" value="{{.CSRF}}">
    <label>{{t "Upload files"}} <span class="muted">({{tf "any type, up to %s each" .Data.limit}})</span><br><input type="file" name="file" id="upload-input" multiple required></label>
    <p class="actionrow"><button type="submit">{{t "Upload"}}</button> <span class="muted small" id="upload-hint" hidden>{{t "…or drop files anywhere on this box."}}</span></p>
    <ul class="progress" id="upload-progress"></ul>
  </form>
</div>
<form method="get" class="filter files-filter">
  <span class="kinds">
    <a href="/b/{{$b}}/files{{if .Data.q}}?q={{.Data.q}}{{end}}"{{if not .Data.kind}} class="active"{{end}}>{{t "All"}}</a>
    {{range .Data.kinds}}<a href="/b/{{$b}}/files?kind={{.}}{{if $.Data.q}}&amp;q={{$.Data.q}}{{end}}"{{if eq . $.Data.kind}} class="active"{{end}}>{{t (index $.Data.kindNames .)}}</a>{{end}}
  </span>
  {{if .Data.kind}}<input type="hidden" name="kind" value="{{.Data.kind}}">{{end}}
  <input type="search" name="q" value="{{.Data.q}}" placeholder="{{t "Search files"}}" size="18"> <button type="submit" class="small">{{t "Search"}}</button>
</form>
<div class="card">
{{if .Data.files}}
<table class="files">
  <tr><th></th><th>{{t "Name"}}</th><th>{{t "Kind"}}</th><th>{{t "Size"}}</th><th>{{t "Date"}}</th><th>Markdown</th><th></th></tr>
  {{range .Data.files}}<tr>
    <td class="icon">{{if eq .Kind "image"}}<a href="/b/{{$b}}/media/{{.ID}}" target="_blank"><img class="thumb" src="/b/{{$b}}/media/{{.ID}}" alt=""></a>{{else}}<span class="badge">{{.Badge}}</span>{{end}}</td>
    <td class="name"><a href="/b/{{$b}}/media/{{.ID}}" target="_blank">{{.Filename}}</a>
      <details class="inline"><summary class="mini">{{t "rename"}}</summary>
        <form method="post" action="/b/{{$b}}/files/{{.ID}}/rename" class="inline">
          <input type="hidden" name="_csrf" value="{{$.CSRF}}"><input type="hidden" name="back" value="{{$.Data.self}}">
          <input type="text" name="filename" value="{{.Filename}}" maxlength="120" required size="18">
          <button class="mini">{{t "Save"}}</button>
        </form></details></td>
    <td class="nowrap">{{t (index $.Data.kindNames .Kind)}}</td>
    <td class="nowrap">{{size .Size}}</td>
    <td class="nowrap">{{date .CreatedAt}}</td>
    <td><input class="copy" readonly value="{{filemd .}}" onclick="this.select()"></td>
    <td class="nowrap"><a href="/b/{{$b}}/media/{{.ID}}?download">{{t "download"}}</a> &middot;
      <form method="post" action="/b/{{$b}}/files/{{.ID}}/delete" class="inline"><input type="hidden" name="_csrf" value="{{$.CSRF}}"><input type="hidden" name="back" value="{{$.Data.self}}"><button class="mini danger">{{t "delete"}}</button></form></td>
  </tr>{{end}}
</table>
{{else if or .Data.q .Data.kind}}<p class="muted">{{t "No files match."}}</p>
{{else}}<p class="muted">{{t "No files yet."}}</p>{{end}}
</div>
{{if gt .Data.lastPage 1}}
<div class="pager">
  {{if gt .Data.pageNum 1}}<a href="{{.Data.prevURL}}">&larr; {{t "Newer"}}</a>{{end}}
  <span>{{tf "Page %d of %d" .Data.pageNum .Data.lastPage}}</span>
  {{if lt .Data.pageNum .Data.lastPage}}<a href="{{.Data.nextURL}}">{{t "Older"}} &rarr;</a>{{end}}
</div>
{{end}}
<script>
(function () {
  var zone = document.getElementById("dropzone"), form = document.getElementById("upload-form"), inp = document.getElementById("upload-input"), list = document.getElementById("upload-progress");
  if (!window.fetch || !window.FormData || !zone || !inp) return; // old browser: the plain form still works
  document.getElementById("upload-hint").hidden = false;
  var busy = false;
  function line(text) { var li = document.createElement("li"); li.textContent = text; list.appendChild(li); return li; }
  function upload(files) {
    if (busy || !files.length) return;
    busy = true;
    var done = 0, i = 0;
    function next() {
      if (i >= files.length) {
        busy = false;
        if (done) location.href = {{.Data.self}} + ({{.Data.self}}.indexOf("?") < 0 ? "?ok=" : "&ok=") + encodeURIComponent({{t "Uploaded %d files."}}.replace("%d", done));
        return;
      }
      var f = files[i++], li = line(f.name + " — " + {{t "uploading…"}});
      var fd = new FormData();
      fd.append("_csrf", {{.CSRF}});
      fd.append("file", f);
      fetch(form.action, { method: "POST", body: fd, credentials: "same-origin", headers: { Accept: "application/json" } })
        .then(function (r) { return r.json().then(function (j) { if (!r.ok || j.error) throw new Error(j.error || {{t "upload failed"}}); return j; }); })
        .then(function () { li.textContent = f.name + " — " + {{t "uploaded"}}; done++; })
        .catch(function (err) { li.textContent = f.name + " — " + err.message; })
        .then(next);
    }
    next();
  }
  form.addEventListener("submit", function (ev) { if (inp.files && inp.files.length) { ev.preventDefault(); upload(inp.files); } });
  inp.addEventListener("change", function () { if (inp.files && inp.files.length) { var fs = Array.prototype.slice.call(inp.files); inp.value = ""; upload(fs); } });
  zone.addEventListener("dragover", function (ev) { ev.preventDefault(); zone.className = "card dropzone over"; });
  zone.addEventListener("dragleave", function () { zone.className = "card dropzone"; });
  zone.addEventListener("drop", function (ev) {
    ev.preventDefault();
    zone.className = "card dropzone";
    if (ev.dataTransfer && ev.dataTransfer.files) upload(ev.dataTransfer.files);
  });
})();
</script>
{{end}}