{% extends "base.html" %}
{% block title %}{{ file }} · {{ name }} · The Booth{% endblock %}
{% block html_attrs %} data-booth="{{ name }}"{% endblock %}
{% block content %}
<div class="docview">
  <div class="vbar">
    <a class="vbtn vx" href="/b/{{ name_url }}/" title="back to gallery (Esc)">✕</a>
    <span class="vname">{{ file }}</span>
    <span class="vspacer"></span>
    <a class="vbtn" href="{{ file_url }}?dl=1" title="download {{ file }}">⬇</a>
  </div>
  {# Same record, same reason as the image viewer: the sidecar that says what
     this doc IS travels with it to full-page view. #}
  {% if caption %}<div class="doccap">{{ caption }}</div>{% endif %}
  {% if marks %}
  <div class="docmarks">
    {% for m in marks if m.shape == 'note' %}<pre class="vnote">{{ m.text }}</pre>{% endfor %}
  </div>
  {% endif %}
  {% if is_html %}
    <article class="markdown-body">{{ body|safe }}</article>
  {% else %}
    <pre class="textview">{{ body }}</pre>
  {% endif %}
</div>
<style>
  /* .markdown-body and .textview live in base.html (shared with the inline
     gallery view). Only the full-page layout wrapper is page-specific. */
  .docview{max-width:52rem;margin:0 auto;padding:0 clamp(12px,3vw,20px) 64px}
  .docview .vbar{margin:0 calc(-1 * clamp(12px,3vw,20px)) 20px;border-radius:0}
  .docview .textview{overflow-x:auto}
  .doccap{margin:0 0 20px;padding:8px 14px;font-size:var(--size-body);line-height:var(--leading-body);
    color:var(--text-body);border-left:3px solid var(--border-strong);white-space:pre-wrap}
  .docmarks{display:flex;flex-direction:column;gap:8px;margin:0 0 20px}
</style>
<script>
  (function () {
    /* Escape leaves the page, so it must not fire from inside a field someone
       is typing in — the same guard the image viewer carries, stated in both
       places because the handler is on `document` in both. */
    function isEditable(el) {
      return !!(el && (el.isContentEditable ||
                       /^(input|textarea|select)$/i.test(el.tagName || '')));
    }
    document.addEventListener('keydown', function (e) {
      if (isEditable(e.target)) return;
      if (e.key === 'Escape') window.location.href = {{ ('/b/' ~ name_url ~ '/')|tojson }};
    });
  })();
</script>
{% endblock %}