{% extends "base.html" %}
{% from "_provenance.html" import provenance %}
{% from "_lifetime.html" import lifetime %}
{# THE DESK (R2 C4). The index triaged by what needs the operator: needs you,
   then new since you looked, then everything else — always in that order, and
   the ORDER WITHIN each is decided in app.index, never here. A section with no
   booths renders nothing at all: no heading, no empty box (the negative half
   of the kept-lane pair this replaces). #}

{# The first four images, the originals shown small. A blurred one stays
   blurred (`blurred-thumb`, the cover's rule). A booth with no images shows the
   kind placeholder the cards used to. #}
{% macro preview(b) -%}
  <a class="desk-strip" href="/b/{{ b.name_url }}/" tabindex="-1" aria-hidden="true">
  {% if b.preview %}
    {% for url, blurred in b.preview %}
      <img class="{{ 'blurred-thumb' if blurred }}" loading="lazy" src="/b/{{ b.name_url }}/{{ url }}" alt="">
    {% endfor %}
  {% elif b.has_index %}<span class="ph">▦ page</span>
  {% elif b.kinds.video %}<span class="ph">▶ video</span>
  {% elif b.kinds.audio %}<span class="ph">♪ audio</span>
  {% else %}<span class="ph">◆ files</span>
  {% endif %}
  </a>
{%- endmacro %}

{% macro row(b, section) -%}
  <article class="desk-row{% if section == 'needs' %} is-needs{% endif %}" data-booth="{{ b.name }}" data-kept="{{ '1' if b.kept else '0' }}">
    {{ preview(b) }}
    <div class="desk-main">
      {# The manifest title leads when there is one; the directory name stays
         beside it because it is what the URL says. #}
      <a class="desk-title" href="/b/{{ b.name_url }}/">
        {%- if b.manifest and not b.manifest.error and b.manifest.title and b.manifest.title != b.name -%}
          {{ b.manifest.title }} <span class="desk-slug">{{ b.name }}</span>
        {%- else -%}{{ b.name }}{%- endif -%}
      </a>
      {{ provenance(b.manifest) }}
      <div class="desk-facts">
        {{ b.count }} item{{ '' if b.count == 1 else 's' }}
        {% if b.flags %} · <span class="desk-flags">{{ b.flags }} flagged</span>{% endif %}
        · {{ lifetime(b.kept, b.hold, b.expires_in) }}
        · <a class="dl-link" href="/b/{{ b.name_url }}/?download=1" title="download this booth as a zip">⬇ zip</a>
      </div>
    </div>
    <div class="desk-side">
      {% if b.marks_open %}<span class="badge badge-mark">? {{ b.marks_open }} open</span>
      {% elif b.hold == "unreadable" %}<span class="badge badge-broken">marks unreadable</span>
      {% elif section == 'new' %}<span class="badge badge-new">new</span>{% endif %}
      {% if b.uploaded %}<span class="badge">⬆ pickup</span>{% endif %}
      <div class="desk-acts">
      {# Keep / release and the ×. The confirmation text is DATA-DRIVEN: the
         booth name travels as a data attribute and never reaches a JS string
         (see the script below). Release is reversible, so it has no prompt of
         its own beyond the wording. #}
      {% if b.kept %}
        <form class="release" method="post" action="/b/{{ b.name_url }}/unkeep"
              data-booth="{{ b.name }}" data-confirm="release">
          <button title="release this booth so it can be wiped">release</button>
        </form>
        <form class="wipe wipe-kept" method="post" action="/b/{{ b.name_url }}/delete"
              data-booth="{{ b.name }}" data-confirm="wipe-kept">
          <button title="wipe this KEPT booth now" aria-label="wipe kept booth">×</button>
        </form>
      {% else %}
        <form class="keepit" method="post" action="/b/{{ b.name_url }}/keep">
          <button title="keep — exempt from the {{ ttl_hours }}h sweep" aria-label="keep booth">★</button>
        </form>
        <form class="wipe" method="post" action="/b/{{ b.name_url }}/delete"
              data-booth="{{ b.name }}" data-confirm="wipe">
          <button title="wipe now" aria-label="wipe booth">×</button>
        </form>
      {% endif %}
      </div>
    </div>
  </article>
{%- endmacro %}

{% block content %}
<div class="desk">
  <div class="desk-list">
    {% if needs %}
    <section class="desk-sec" data-section="needs">
      <h2 class="desk-head desk-head-needs">Needs you <span class="desk-rule">oldest question first</span></h2>
      {% for b in needs %}{{ row(b, 'needs') }}{% endfor %}
    </section>
    {% endif %}
    {% if new %}
    <section class="desk-sec" data-section="new">
      <h2 class="desk-head desk-head-new">New since you looked <span class="desk-rule">newest first</span></h2>
      {% for b in new %}{{ row(b, 'new') }}{% endfor %}
    </section>
    {% endif %}
    {% if rest %}
    <section class="desk-sec" data-section="rest">
      <h2 class="desk-head">Everything else <span class="desk-rule">last activity first</span></h2>
      {% for b in rest %}{{ row(b, 'rest') }}{% endfor %}
    </section>
    {% endif %}
    {% if not needs and not new and not rest %}
    <div class="empty">
      No booths yet. Drop a folder into <code>{{ data_dir }}</code>, or upload files for pickup.
    </div>
    {% endif %}
  </div>

  <aside class="desk-aside">
    {# Benches: running things. DAMAGED AND ABSENT MUST NOT RENDER THE SAME —
       an unreadable registry says so; an empty one renders no panel. #}
    {% if benches_error %}
    <section class="desk-panel" data-panel="benches">
      <h2 class="desk-panel-head">Benches</h2>
      <div class="bench-err">the bench registry could not be read: {{ benches_error }}</div>
    </section>
    {% elif benches %}
    <section class="desk-panel" data-panel="benches">
      <h2 class="desk-panel-head">Benches <span class="desk-rule">running things</span></h2>
      {% for b in benches %}
      {# Agent-written URLs: only http(s) becomes a link. Autoescape stops markup,
         not a `javascript:` scheme, so anything else renders as plain text. #}
      {% set web = b.url.lower().startswith(('http://', 'https://')) %}
      <{{ 'a' if web else 'div' }} class="desk-bench is-{{ b.state }}"{% if web %} href="{{ b.url }}" target="_blank" rel="noopener"{% endif %}>
        <span class="desk-bench-dot" aria-hidden="true"></span>
        <span class="desk-bench-main"><span class="desk-bench-name">{{ b.name or b.url }}</span>
          <span class="desk-bench-sub">{% if b.owner %}{{ b.owner }} · {% endif %}{{ b.state }}</span></span>
      </{{ 'a' if web else 'div' }}>
      {% endfor %}
    </section>
    {% endif %}

    {% if bookmarks %}
    <section class="desk-panel" data-panel="bookmarks">
      <h2 class="desk-panel-head">Bookmarks <span class="desk-rule">pinned first</span></h2>
      {% for e in bookmarks %}
      {% set web = e.url.lower().startswith(('http://', 'https://')) %}
      <{{ 'a' if web else 'div' }} class="desk-mark{% if e.pinned %} is-pinned{% endif %}"{% if web %} href="{{ e.url }}" target="_blank" rel="noopener"{% endif %}>
        {{ e.desc }}{% if e.who %}<span class="desk-bench-sub">{{ e.who }}</span>{% endif %}</{{ 'a' if web else 'div' }}>
      {% endfor %}
      <a class="desk-more" href="{{ board_url }}">all {{ bookmarks_total }} on the board →</a>
    </section>
    {% endif %}

    <section class="desk-panel" data-panel="pickup">
      <h2 class="desk-panel-head">Pickup</h2>
      <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 · 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>
    </section>
  </aside>
</div>

<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();
      }
    });
  })();

  /* Destructive-action confirmation, delegated and DATA-DRIVEN. The booth name
     travels as a data attribute, where escaping is escaping, and never reaches
     a JS string literal: a booth name is agent-authored, and an inline handler
     carrying one was a live injection path. With JS off the form submits
     without a prompt. */
  (function () {
    var WORDS = {
      release: function (n) {
        return 'Release “' + n + '”?\n\nIt rejoins the sweep: it will be wiped '
             + '{{ ttl_hours|int }}h after its last activity. Nothing is deleted by this step.';
      },
      'wipe-kept': function (n) {
        return 'WIPE the KEPT booth “' + n + '”?\n\nThis deletes it and its files '
             + 'immediately. Kept booths are the ones nothing else will clean up, so nobody '
             + 'else is going to do this for you — and nothing brings it back.';
      },
      wipe: function (n) { return 'Wipe booth “' + n + '”?'; }
    };
    document.addEventListener('submit', function (ev) {
      var form = ev.target.closest ? ev.target.closest('form[data-confirm]') : null;
      if (!form) return;
      var word = WORDS[form.getAttribute('data-confirm')];
      if (word && !confirm(word(form.getAttribute('data-booth') || ''))) ev.preventDefault();
    }, true);
  })();
</script>
{% endblock %}