{% extends "layout.html" %}
{% block title %}{{ zone.slug }} — Abilian CDN{% endblock %}
{% block content %}
<h1>{{ zone.slug }}</h1>
<p class="actions"><a class="button" href="/_/ui/zones/{{ zone.slug }}/stats">Statistics</a>
  <a class="button" href="/_/ui/zones/{{ zone.slug }}/settings">Settings</a>
  {% if zone.visibility == "private" %}<span class="badge">private</span>{% endif %}</p>
<p class="crumbs">
  <a href="/_/ui/zones/{{ zone.slug }}/">{{ zone.slug }}</a>{% for crumb in crumbs %}<a href="/_/ui/zones/{{ zone.slug }}/{{ crumb.prefix }}">{{ crumb.name }}</a>{% endfor %}
</p>

<div class="dropzone" id="dropzone">
  <strong>Drop files here</strong> to upload them into this folder,
  or <label style="display:inline"><input type="file" id="picker" multiple hidden><a href="#" onclick="picker.click();return false">choose files</a></label>.
  <progress id="progress" max="100" value="0" hidden></progress>
</div>

<div class="card">
  {% if prefixes or objects %}
  <table>
    <thead>
      <tr><th>Name</th><th class="numeric">Size</th><th>Type</th>
        <th class="numeric" title="Downloads over the last {{ days }} days">Downloads</th>
        <th>URL</th></tr>
    </thead>
    <tbody>
      {% for folder in prefixes %}
      <tr>
        <td><a href="/_/ui/zones/{{ zone.slug }}/{{ folder.prefix }}">{{ folder.name }}/</a></td>
        <td class="numeric muted">—</td><td class="muted">folder</td>
        <td class="numeric muted">—</td><td></td>
      </tr>
      {% endfor %}
      {% for object in objects %}
      <tr>
        <td><a href="{{ object.url }}">{{ object.name }}</a></td>
        <td class="numeric muted">{{ object.size | filesize }}</td>
        <td class="muted">{{ object.content_type }}</td>
        <td class="numeric{% if not object.downloads %} muted{% endif %}">{{ object.downloads }}</td>
        <td>
          <button class="copy" data-url="{{ object.url }}">Copy URL</button>
          <button class="sign" data-path="{{ object.path }}">Sign</button>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  {% if truncated %}
  <p class="muted">The first {{ page }} entries. Narrow the view by opening a
    folder, or list the rest through the API.</p>
  {% endif %}
  {% else %}
  <p class="empty">Nothing here yet — drop a file above.</p>
  {% endif %}
</div>

<script>
const zone = {{ zone.slug | tojson }};
const prefix = {{ prefix | tojson }};
const csrf = {{ csrf_token() | tojson }};

document.querySelectorAll("button.copy").forEach(button => {
  button.addEventListener("click", async () => {
    await navigator.clipboard.writeText(button.dataset.url);
    const was = button.textContent;
    button.textContent = "Copied";
    setTimeout(() => { button.textContent = was; }, 1200);
  });
});

document.querySelectorAll("button.sign").forEach(button => {
  button.addEventListener("click", async () => {
    const response = await fetch(
      `/_/ui/zones/${encodeURIComponent(zone)}/sign?path=${encodeURIComponent(button.dataset.path)}`,
      {method: "POST", headers: {"x-csrftoken": csrf}}
    );
    const body = await response.json();
    if (!response.ok) { alert(body.detail ?? response.statusText); return; }
    await navigator.clipboard.writeText(body.url);
    button.textContent = "Copied (1h)";
    setTimeout(() => { button.textContent = "Sign"; }, 1600);
  });
});

const dropzone = document.getElementById("dropzone");
const progress = document.getElementById("progress");

async function upload(files) {
  progress.hidden = false;
  for (const [index, file] of [...files].entries()) {
    progress.value = Math.round((index / files.length) * 100);
    const response = await fetch(
      `/_/ui/zones/${encodeURIComponent(zone)}/upload/${prefix}${encodeURIComponent(file.name)}`,
      {method: "PUT", body: file, headers: {"x-csrftoken": csrf, "content-type": file.type || "application/octet-stream"}}
    );
    if (!response.ok) {
      alert(`${file.name}: ${(await response.json()).detail ?? response.statusText}`);
      progress.hidden = true;
      return;
    }
  }
  location.reload();
}

["dragenter", "dragover"].forEach(name =>
  dropzone.addEventListener(name, event => { event.preventDefault(); dropzone.classList.add("hot"); }));
["dragleave", "drop"].forEach(name =>
  dropzone.addEventListener(name, event => { event.preventDefault(); dropzone.classList.remove("hot"); }));
dropzone.addEventListener("drop", event => upload(event.dataTransfer.files));
document.getElementById("picker").addEventListener("change", event => upload(event.target.files));
</script>
{% endblock %}