{% 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 %}{% if board %}{{ board|length }} link{{ '' if board|length == 1 else 's' }}{% if items %} · {{ items|length }} file{{ '' if items|length == 1 else 's' }}{% endif %}{% else %}{{ items|length }} item{{ '' if items|length == 1 else 's' }} · expires in {{ expires_in|dur }}{% endif %}</span>
  {% if items %}<a class="dl-link" href="/b/{{ name_url }}/?download=1" title="download this booth as a zip">⬇ zip</a>{% endif %}
    {# A durable multi-writer board gets no one-click wipe — same rule as the
       kept lane on the index. Remove rows with the per-row ×, or release the
       board from the index and wipe it from there. #}
    {% if not board %}
  <form class="wipe wipe-lg" method="post" action="/b/{{ name_url }}/delete"
        onsubmit="return confirm('Wipe this booth now?')">
    <button>Wipe now</button>
  </form>
    {% endif %}
</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 board %}
  {# THE STANDING LINK BOARD. Every agent session on the fleet appends here, so
     this is the one booth where the useful granularity is the ROW, not the
     folder. Rendered as real UI rather than a markdown blob so a dead link can
     be removed without hand-editing the file — and so provenance (who posted
     it, when) is readable at a glance, which is the whole reason a bare URL
     three days old is useless.

     Removal posts a CONTENT ID, never a row number: another session can append
     between this page rendering and the × being clicked, and an index would
     then delete a neighbour. #}
  <div class="board">
    <div class="board-head">
      <span class="board-title">{{ board|length }} link{{ '' if board|length == 1 else 's' }}</span>
      <span class="board-note">newest last · appended by any session · × removes one row</span>
    </div>
    {% for e in board %}
    <div class="board-row">
      <div class="board-main">
        <a class="board-link" href="{{ e.url }}" target="_blank" rel="noopener">{{ e.desc }}</a>
        <div class="board-url">{{ e.url }}</div>
      </div>
      <div class="board-meta">
        {% if e.who %}<span class="board-who">{{ e.who }}</span>{% endif %}
        {% if e.when %}<span class="board-when">{{ e.when }}</span>{% endif %}
      </div>
      <button type="button" class="copy-btn board-copy" data-copy="{{ e.url }}" title="copy URL">⧉</button>
      <form class="board-rm" method="post" action="/b/{{ name_url }}/unlink"
            onsubmit="return confirm('Remove this link?\n\n{{ e.desc }}\n{{ e.url }}\n\nThe rest of the board is untouched.')">
        <input type="hidden" name="entry" value="{{ e.id }}">
        <button title="remove this link">×</button>
      </form>
    </div>
    {% endfor %}
  </div>
{% endif %}

{% if not items and not board %}
  <div class="empty">This booth is empty.</div>
{% elif items %}
  {# `elif items` and not a bare `else`: a board booth has NO gallery items (its
     links.md is rendered as the board above and filtered out), so a plain else
     would emit an empty <div class="gallery"> under the board. #}
  <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 %}