{% extends "base.html" %}
{% block content %}
<form class="uploader" method="post" action="/upload" enctype="multipart/form-data">
  <label class="drop" for="booth-files">
    <span class="drop-icon">⬆</span>
    <span class="drop-main">Upload files for pickup</span>
    <span class="drop-sub" id="drop-sub">drop here, or click to choose · one pickup id, wiped in {{ ttl_hours }}h</span>
    <input id="booth-files" name="files" type="file" multiple>
  </label>
  <button class="up-go" type="submit">Get pickup id →</button>
</form>

{% if not booths %}
  <div class="empty">
    No booths yet. Upload files above, or drop a folder into <code>{{ data_dir }}</code>.
  </div>
{% else %}
  <div class="grid">
    {% for b in booths %}
    <article class="card">
      <a class="thumb" href="/b/{{ b.name_url }}/">
        {% if b.thumb_url %}
          <img loading="lazy" src="/b/{{ b.name_url }}/{{ b.thumb_url }}" alt="">
        {% elif b.has_index %}
          <div class="ph">▦ page</div>
        {% elif b.kinds.video %}
          <div class="ph">▶ video</div>
        {% elif b.kinds.audio %}
          <div class="ph">♪ audio</div>
        {% else %}
          <div class="ph">◆ files</div>
        {% endif %}
        {% if b.uploaded %}<span class="badge">⬆ pickup</span>{% endif %}
      </a>
      <div class="meta">
        <a class="name" href="/b/{{ b.name_url }}/">{{ b.name }}</a>
        <div class="sub">{{ b.count }} item{{ '' if b.count == 1 else 's' }} · expires in {{ b.expires_in|dur }} · <a class="dl-link" href="/b/{{ b.name_url }}/?download=1" title="download this booth as a zip">⬇ zip</a></div>
      </div>
      <form class="wipe" method="post" action="/b/{{ b.name_url }}/delete"
            onsubmit="return confirm('Wipe booth “{{ b.name }}”?')">
        <button title="wipe now" aria-label="wipe booth">×</button>
      </form>
    </article>
    {% endfor %}
  </div>
{% endif %}

<script>
  /* progressive enhancement: reflect chosen files + drag-drop onto the panel.
     With JS off, the native file input + submit still works. */
  (function () {
    var input = document.getElementById('booth-files');
    var sub = document.getElementById('drop-sub');
    var drop = document.querySelector('.drop');
    if (!input) return;
    function show() {
      var n = input.files ? input.files.length : 0;
      if (n) {
        sub.textContent = n + ' file' + (n > 1 ? 's' : '') + ' ready — hit “Get pickup id”';
        drop.classList.add('has');
      }
    }
    input.addEventListener('change', show);
    ['dragover', 'dragenter'].forEach(function (e) {
      drop.addEventListener(e, function (ev) { ev.preventDefault(); drop.classList.add('over'); });
    });
    ['dragleave', 'drop'].forEach(function (e) {
      drop.addEventListener(e, function (ev) { ev.preventDefault(); drop.classList.remove('over'); });
    });
    drop.addEventListener('drop', function (ev) {
      if (ev.dataTransfer && ev.dataTransfer.files.length) {
        try { input.files = ev.dataTransfer.files; } catch (_) {}
        show();
      }
    });
  })();
</script>
{% endblock %}