<!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>clipbox</title>
<link rel="stylesheet" href="/static/common.css">
<link rel="stylesheet" href="/static/index.css">
</head>
<body>
$tabs
<div class="container">
  <h1><img src="/icon.svg" alt="">clipbox</h1>
  <div class="new-form">
    <textarea id="new-content" placeholder="Paste or type text..."></textarea>
    <button onclick="createBuf()">Create</button>
  </div>
  $buffer_list
  <div class="hint">
    <strong>curl usage:</strong>
    <table class="usage"><tbody>
      <tr><td>Read</td><td><code>curl http://host:port/name</code></td></tr>
      <tr><td>Write</td><td><code>curl -X PUT -d 'text' http://host:port/name</code></td></tr>
      <tr><td>Rename</td><td><code>curl -X PATCH -d 'new' http://host:port/name</code></td></tr>
      <tr><td>Delete</td><td><code>curl -X DELETE http://host:port/name</code></td></tr>
    </tbody></table>
    <table class="usage"><tbody>
      <tr><td>List all buffers</td><td><code>curl http://host:port/api/buffers</code></td></tr>
    </tbody></table>
  </div>
</div>
<script>
async function createBuf() {
  var content = document.getElementById("new-content").value;
  var res = await fetch("/api/create", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ content: content })
  });
  if (res.ok) {
    var data = await res.json();
    window.location.href = "/" + encodeURIComponent(data.name);
  }
}
async function copyBuf(btn) {
  var text = btn.getAttribute("data-content");
  try {
    await navigator.clipboard.writeText(text);
  } catch (e) {
    var ta = document.createElement("textarea");
    ta.value = text;
    ta.style.position = "fixed";
    ta.style.opacity = "0";
    document.body.appendChild(ta);
    ta.focus();
    ta.select();
    document.execCommand("copy");
    document.body.removeChild(ta);
  }
  var orig = btn.innerHTML;
  btn.innerHTML = "&#x2713;";
  btn.classList.add("done");
  setTimeout(function() { btn.innerHTML = orig; btn.classList.remove("done"); }, 1500);
}
async function deleteBuf(name) {
  if (!confirm("Delete buffer '" + name + "'?")) return;
  const res = await fetch("/" + encodeURIComponent(name), { method: "DELETE" });
  if (res.ok) location.reload();
}
</script>
</body>
</html>
