{% 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>
  <span class="badge">pull</span>
  {% if zone.visibility == "private" %}<span class="badge">private</span>{% endif %}
</p>
<p class="subtitle">Mirrors <code>{{ zone.origin_url }}</code> — cached for
  {{ zone.min_ttl }}–{{ zone.max_ttl }} s, missing paths for {{ zone.negative_ttl }} s.</p>

<div class="card">
  {% if entries %}
  <table>
    <thead>
      <tr><th>Path</th><th class="numeric">Size</th><th>State</th>
        <th class="numeric" title="Downloads over the last {{ days }} days">Downloads</th>
        <th>URL</th></tr>
    </thead>
    <tbody>
      {% for entry in entries %}
      <tr>
        <td><a href="/{{ entry.url }}">{{ entry.path }}</a></td>
        <td class="numeric muted">{% if entry.status == 200 %}{{ entry.size | filesize }}{% else %}—{% endif %}</td>
        <td class="muted">
          {%- if entry.status != 200 -%}not at origin
          {%- elif entry.fresh -%}fresh, {{ entry.age }} s old
          {%- else -%}stale, {{ entry.age }} s old
          {%- endif -%}
        </td>
        <td class="numeric{% if not entry.downloads %} muted{% endif %}">{{ entry.downloads }}</td>
        <td><button class="copy" data-url="/{{ entry.url }}">Copy URL</button></td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  {% else %}
  <p class="empty">Nothing cached yet. The first request for a path fetches it from the origin.</p>
  {% endif %}
</div>

<script>
document.querySelectorAll("button.copy").forEach(button => {
  button.addEventListener("click", async () => {
    await navigator.clipboard.writeText(new URL(button.dataset.url, location.origin).href);
    const was = button.textContent;
    button.textContent = "Copied";
    setTimeout(() => { button.textContent = was; }, 1200);
  });
});
</script>
{% endblock %}