{% extends "base.html" %}
{% block title %}{{ name }} · The Booth{% endblock %}
{% block content %}
<div class="boothhead">
  <a class="back" href="/">‹ all booths</a>
  <h1>{{ name }}</h1>
  <span class="sub">{% if uploaded %}<span class="badge">⬆ pickup</span> {% endif %}{{ items|length }} item{{ '' if items|length == 1 else 's' }} · expires in {{ expires_in|dur }}</span>
  {% if items %}<a class="dl-link" href="/b/{{ name_url }}/?download=1" title="download this booth as a zip">⬇ zip</a>{% endif %}
  <form class="wipe wipe-lg" method="post" action="/b/{{ name_url }}/delete"
        onsubmit="return confirm('Wipe this booth now?')">
    <button>Wipe now</button>
  </form>
</div>

{% if uploaded %}
<div class="pickup-note">
  📦 Pickup <code>{{ name }}</code>
  <button type="button" class="copy-btn" data-copy="{{ name }}" title="copy id to clipboard">⧉ copy</button>
  — download files below, or on nh3-dev grab <code>~/booth-data/{{ name }}/</code>
</div>
{% endif %}

{% if not items %}
  <div class="empty">This booth is empty.</div>
{% else %}
  <div class="gallery">
    {% for it in items %}
    {% if it.doc and it.rendered is not none %}
      {# Docs render INLINE, collapsible, and closable — not a link to a
         separate page. <details open> is native collapse (works with JS off);
         the ✕ hides the item for the session (JS, progressive enhancement).
         The item spans the full grid width so prose has room to read. #}
      <figure class="item item-doc" data-name="{{ it.name }}">
        <details class="doc-inline" open>
          <summary class="doc-bar">
            <span class="doc-chevron" aria-hidden="true">▸</span>
            <span class="doc-name">{{ it.name }}</span>
            <span class="doc-spacer"></span>
            <a class="doc-act" href="view?f={{ it.url }}" title="open full page">⤢</a>
            <a class="doc-act" href="{{ it.url }}" download title="download {{ it.name }}">⬇</a>
            <button type="button" class="doc-act doc-close" title="close (hide for now)" aria-label="close">✕</button>
          </summary>
          {% if it.rendered_html %}
            <article class="markdown-body doc-body">{{ it.rendered|safe }}</article>
          {% else %}
            <pre class="textview doc-body">{{ it.rendered }}</pre>
          {% endif %}
        </details>
      </figure>
    {% else %}
    <figure class="item item-{{ it.kind }}">
      {% if it.kind == 'image' %}
        <a href="view?f={{ it.url }}"><img loading="lazy" src="{{ it.url }}" alt="{{ it.name }}"></a>
      {% elif it.kind == 'video' %}
        {# preload="none": a booth of a dozen webms was fetching them
           all at page load ("metadata" still pulls real ranges per
           file); nothing loads until the viewer hits play #}
        <video controls preload="none" src="{{ it.url }}"></video>
      {% elif it.kind == 'audio' %}
        <audio controls preload="none" src="{{ it.url }}"></audio>
      {% elif it.doc %}
        {# a doc too large to inline (over DOC_MAX_BYTES) still links out #}
        <a class="dl doc" href="view?f={{ it.url }}" title="view {{ it.name }}">📄 {{ it.name }}</a>
      {% else %}
        <a class="dl" href="{{ it.url }}" download>⬇ {{ it.name }}</a>
      {% endif %}
      {% if it.kind == 'other' %}
        {% if it.caption %}<figcaption><span class="cap-text">{{ it.caption }}</span></figcaption>{% endif %}
      {% else %}
        <figcaption>
          <a class="dl-link" href="{{ it.url }}" download title="download {{ it.name }}">⬇</a>
          <span class="cap-text">{{ it.caption or it.name }}</span>
        </figcaption>
      {% endif %}
    </figure>
    {% endif %}
    {% endfor %}
  </div>
{% endif %}

<script>
  /* Copy-to-clipboard for any .copy-btn[data-copy]. The Booth serves over plain
     HTTP on a LAN IP, where navigator.clipboard is undefined (secure-context
     only) — so fall back to a hidden-textarea execCommand('copy'). */
  (function () {
    function copyText(t) {
      if (navigator.clipboard && window.isSecureContext) {
        return navigator.clipboard.writeText(t);
      }
      var ta = document.createElement('textarea');
      ta.value = t;
      ta.setAttribute('readonly', '');
      ta.style.position = 'fixed';
      ta.style.top = '-1000px';
      ta.style.opacity = '0';
      document.body.appendChild(ta);
      ta.select();
      try { document.execCommand('copy'); } catch (e) {}
      document.body.removeChild(ta);
      return Promise.resolve();
    }
    document.querySelectorAll('.copy-btn').forEach(function (btn) {
      var label = btn.textContent;
      btn.addEventListener('click', function () {
        copyText(btn.getAttribute('data-copy')).then(function () {
          btn.classList.add('copied');
          btn.textContent = '✓ copied';
          setTimeout(function () { btn.classList.remove('copied'); btn.textContent = label; }, 1300);
        });
      });
    });
  })();

  /* Inline-doc ✕ closes (hides) a rendered doc for the session. The button sits
     inside <summary>, so without this its click would just toggle the <details>
     open/closed — stopPropagation + preventDefault make ✕ mean "close", not
     "collapse". Collapse stays available via the rest of the summary bar. With
     JS off the button is inert and collapse via <details> still works. */
  (function () {
    document.querySelectorAll('.doc-close').forEach(function (btn) {
      btn.addEventListener('click', function (ev) {
        ev.preventDefault();
        ev.stopPropagation();
        var item = btn.closest('.item-doc');
        if (item) item.classList.add('is-closed');
      });
    });
  })();
</script>
{% endblock %}