{{define "editor"}}<textarea name="{{.name}}" id="ed-{{.name}}" rows="{{.rows}}"{{if .tall}} class="editor"{{end}}>{{.value}}</textarea>
<div class="editor-tools">
  <label class="upload">{{t "Insert file"}} <input type="file" name="inline_file" id="ed-{{.name}}-file"></label>
  <span class="upload-status" id="ed-{{.name}}-status"></span>
  <span class="muted small">{{t "…or paste / drop a file into the text. Images are shown, other files linked."}}</span>
  <noscript><span class="muted small">{{t "The file is added at the end of the text when you save."}}</span></noscript>
</div>
{{template "mdhelp"}}
<script>
(function () {
  var ta = document.getElementById("ed-{{.name}}"), inp = document.getElementById("ed-{{.name}}-file"), st = document.getElementById("ed-{{.name}}-status");
  if (!window.fetch || !window.FormData || !ta || !inp) return; // old browser: the file is uploaded on save instead
  function insert(text) {
    var s = ta.selectionStart, e = ta.selectionEnd, pre = ta.value.slice(0, s), post = ta.value.slice(e);
    var chunk = (pre && !/\n$/.test(pre) ? "\n" : "") + text + "\n";
    ta.value = pre + chunk + post;
    ta.selectionStart = ta.selectionEnd = (pre + chunk).length;
    ta.focus();
  }
  function upload(file) {
    st.textContent = {{t "Uploading"}} + " " + file.name + "…";
    var fd = new FormData();
    fd.append("_csrf", {{.csrf}});
    fd.append("file", file);
    return fetch({{.upload}}, { 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 (j) { insert(j.markdown); st.textContent = {{t "Inserted"}} + " " + j.filename + "."; inp.value = ""; })
      .catch(function (err) { st.textContent = {{t "Could not upload:"}} + " " + err.message; });
  }
  function uploadAll(files) { // one after the other, so each lands where the caret is
    var i = 0;
    (function next() { if (i < files.length) upload(files[i++]).then(next); })();
  }
  inp.addEventListener("change", function () { if (inp.files && inp.files[0]) upload(inp.files[0]); });
  ta.addEventListener("paste", function (ev) {
    var items = ev.clipboardData && ev.clipboardData.items;
    if (!items) return;
    for (var i = 0; i < items.length; i++) {
      if (items[i].kind === "file") { ev.preventDefault(); upload(items[i].getAsFile()); return; }
    }
  });
  ta.addEventListener("dragover", function (ev) { ev.preventDefault(); });
  ta.addEventListener("drop", function (ev) {
    var fs = ev.dataTransfer && ev.dataTransfer.files;
    if (fs && fs.length) { ev.preventDefault(); uploadAll(Array.prototype.slice.call(fs)); }
  });
})();
</script>{{end}}