{% extends "base.html" %}
{% block title %}{{ file }} · {{ name }} · The Booth{% endblock %}
{% block content %}
<div class="viewer">
  <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>
    <span class="vtoggle" id="vtoggle" style="display:none">
      <button type="button" class="vseg on" id="btn-fit">Fit</button><button type="button" class="vseg" id="btn-one">1:1</button>
    </span>
    <a class="vbtn" href="{{ file_url }}" download title="download {{ file }}">⬇</a>
  </div>
  {% if prev_url %}<a class="vnav vprev" href="?f={{ prev_url }}" title="previous (←)" aria-label="previous image">‹</a>{% endif %}
  {% if next_url %}<a class="vnav vnext" href="?f={{ next_url }}" title="next (→)" aria-label="next image">›</a>{% endif %}
  <div class="vstage fit" id="vstage"><img id="vimg" src="{{ file_url }}" alt="{{ file }}"></div>
  {# THE ANNOTATION, at full size. It was never rendered here before U1 — not
     because the template dropped it, but because the route never resolved it.
     A caption is most useful at the size where you are actually judging the
     thing, so it belongs here at least as much as in the grid. #}
  {% if caption %}<div class="vcap">{{ caption }}</div>{% endif %}
</div>
<style>
  .vnav{position:fixed;top:50%;transform:translateY(-50%);z-index:40;display:flex;
    align-items:center;justify-content:center;width:2.6rem;height:3.4rem;font-size:2rem;
    line-height:1;text-decoration:none;color:var(--fg-1);background:rgba(20,23,32,.55);
    border:1px solid rgba(255,255,255,.10);border-radius:10px;margin:0 .5rem;user-select:none;
    -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:background .15s,border-color .15s}
  .vnav:hover{background:rgba(28,33,46,.92);border-color:var(--aus-bright-cyan,#42dcd1)}
  .vprev{left:0}.vnext{right:0}
  /* Bottom bar rather than the top chrome: a caption can run to CAPTION_MAX
     (800 chars), which would shove the filename and the Fit/1:1 toggle around. */
  .vcap{flex:0 0 auto;max-height:22vh;overflow-y:auto;padding:.6rem clamp(12px,3vw,20px);
    font-size:.85rem;line-height:1.5;color:var(--fg-1);background:var(--rk-surface,rgba(20,23,32,.92));
    border-top:1px solid rgba(255,255,255,.10);white-space:pre-wrap}
  @media print{.vcap{max-height:none;overflow:visible}}
  @media print{.vnav{display:none}}
</style>
<script>
  (function () {
    var img = document.getElementById('vimg');
    var stage = document.getElementById('vstage');
    var toggle = document.getElementById('vtoggle');
    var bFit = document.getElementById('btn-fit');
    var bOne = document.getElementById('btn-one');
    var BACK = {{ ('/b/' ~ name_url ~ '/')|tojson }};
    var PREV = {{ (('?f=' ~ prev_url) if prev_url else '')|tojson }};
    var NEXT = {{ (('?f=' ~ next_url) if next_url else '')|tojson }};

    function setMode(mode) {
      var fit = mode === 'fit';
      stage.classList.toggle('fit', fit);
      stage.classList.toggle('one', !fit);
      bFit.classList.toggle('on', fit);
      bOne.classList.toggle('on', !fit);
    }
    // "fits" == the image at natural size already sits inside the stage, so Fit
    // and 1:1 would render identically — in that case we hide the toggle entirely.
    function fits() {
      return img.naturalWidth <= stage.clientWidth && img.naturalHeight <= stage.clientHeight;
    }
    function evaluate() {
      if (!img.naturalWidth) return;
      if (fits()) {
        toggle.style.display = 'none';
        setMode('fit');
      } else {
        toggle.style.display = 'inline-flex';
        if (!stage.classList.contains('one')) setMode('fit');
      }
    }
    bFit.addEventListener('click', function () { setMode('fit'); });
    bOne.addEventListener('click', function () { setMode('one'); });
    img.addEventListener('load', evaluate);
    window.addEventListener('resize', evaluate);
    if (img.complete) evaluate();
    document.addEventListener('keydown', function (e) {
      if (e.key === 'Escape') window.location.href = BACK;
      else if (e.key === 'ArrowLeft' && PREV) window.location.href = PREV;
      else if (e.key === 'ArrowRight' && NEXT) window.location.href = NEXT;
    });
  })();
</script>
{% endblock %}