{% extends "layout.html" %}
{% block title %}Zones — Abilian CDN{% endblock %}
{% block content %}
<h1>Zones</h1>
<p class="subtitle">{{ organisation.name }}</p>

<div class="card">
  {% if zones %}
  <table>
    <thead>
      <tr>
        <th>Zone</th>
        <th class="numeric">Objects</th>
        <th class="numeric">Size</th>
        <th class="numeric">Requests ({{ days }} d)</th>
        <th class="numeric">Traffic ({{ days }} d)</th>
      </tr>
    </thead>
    <tbody>
      {% for zone in zones %}
      <tr>
        <td><a href="/_/ui/zones/{{ zone.slug }}/">{{ zone.slug }}</a>
          {% if zone.kind == "pull" %}<span class="badge"
            title="A pull zone mirrors an origin you already run: nothing is
uploaded to it, and the first request for a path fetches that path and keeps
a copy.">pull</span>{% endif %}</td>
        <td class="numeric muted">{{ zone.object_count }}</td>
        <td class="numeric muted">{{ zone.total_bytes | filesize }}</td>
        <td class="numeric"><a href="/_/ui/zones/{{ zone.slug }}/stats">{{ zone.requests }}</a></td>
        <td class="numeric muted">{{ zone.bytes_sent | filesize }}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  {% else %}
  <p class="empty">No zones yet. Create one below.</p>
  {% endif %}
</div>

{% if error %}<p class="notice error">{{ error }}</p>{% endif %}
<h2>New zone</h2>
<form class="stack" method="post" action="/_/ui/zones">
  <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
  <label>Slug
    <input type="text" name="slug" placeholder="assets" required
           pattern="[a-z0-9][a-z0-9-]{1,62}">
  </label>
  <label>Kind
    <select name="kind" id="kind">
      <option value="storage">storage — files you upload</option>
      <option value="pull">pull — a mirror of an origin you already run</option>
    </select>
  </label>
  <label id="origin" hidden>Origin
    <input type="text" name="origin_url" placeholder="https://origin.example.com">
  </label>
  <button class="primary" type="submit">Create zone</button>
</form>

<script>
const kind = document.getElementById("kind");
const origin = document.getElementById("origin");
const showOrigin = () => { origin.hidden = kind.value !== "pull"; };
kind.addEventListener("change", showOrigin);
showOrigin();
</script>
{% endblock %}