<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/icon.svg">
<link rel="manifest" href="/manifest.json">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="theme-color" content="#0d0d0d">
<title>filebox</title>
<link rel="stylesheet" href="/static/common.css">
<link rel="stylesheet" href="/static/filebox.css">
</head>
<body>
$tabs
<div class="container">
  <h1><img src="/icon.svg" alt="">filebox</h1>
  <div class="upload-area">
    <label for="file-input">Upload file</label>
    <input type="file" id="file-input" onchange="uploadFile(this)">
    <div class="upload-status" id="upload-status"></div>
  </div>
  $file_list
  <div class="hint">
    <strong>curl usage:</strong>
    <table class="usage"><tbody>
      <tr><td>Upload</td><td><code>curl -F 'file=@photo.jpg' http://host:port/files/</code></td></tr>
      <tr><td>Download</td><td><code>curl http://host:port/files/filename</code></td></tr>
      <tr><td>Delete</td><td><code>curl -X DELETE http://host:port/files/filename</code></td></tr>
    </tbody></table>
    <table class="usage"><tbody>
      <tr><td>List all files</td><td><code>curl http://host:port/api/files</code></td></tr>
    </tbody></table>
  </div>
</div>
<script>
async function uploadFile(input) {
  var file = input.files[0];
  if (!file) return;
  var status = document.getElementById("upload-status");
  status.textContent = "Uploading...";
  var form = new FormData();
  form.append("file", file);
  try {
    var res = await fetch("/files/", { method: "POST", body: form });
    if (res.ok) {
      location.reload();
    } else {
      status.textContent = "Upload failed";
    }
  } catch (e) {
    status.textContent = "Connection lost";
  }
}
async function deleteFile(name) {
  if (!confirm("Delete file '" + name + "'?")) return;
  var res = await fetch("/files/" + encodeURIComponent(name), { method: "DELETE" });
  if (res.ok) location.reload();
}
</script>
</body>
</html>
