{% extends "base.html" %}
{% block title %}{{ sides.a.rel }} · {{ sides.b.rel }} · compare · {{ name }} · The Booth{% endblock %}
{# data-booth: without it Reveal all's script and the head script's reveal
   restore both bail (r3 C6). #}
{% block html_attrs %} data-booth="{{ name }}"{% endblock %}
{# COMPARE (R3). Two items of the review ring side by side, one judgment each:
   flag the winner. The pair is two rels in the URL, always (INV-1); the active
   side and the linked stepping ride the URL as view state. Everything a mark
   can change is a `data-region` keyed by SIDE, never by rel (`a == b` would
   duplicate it) and never `item-` (the swap reads that as a stale tile). THE
   STAGES NEVER ARE: swapping one would restart a playing track.
   The root carries `review` so the review's blur, 1:1 and Reveal-all rules
   apply unchanged; `.compare` overrides its grid. #}
{% macro num(n) -%}#{{ "%0*d"|format(ord_width, n) }}{%- endmacro %}
{% block content %}
<div class="viewer review compare" data-linked="{{ '1' if linked else '0' }}">
  <div class="vbar">
    <a class="vbtn vx" href="{{ back_url }}" title="back to the review of A (Esc)">✕</a>
    <span class="vname">compare <span class="cmp-vs"><span class="ord">{{ num(sides.a.ordinal) }}</span> · <span class="ord">{{ num(sides.b.ordinal) }}</span></span></span>
    <span class="vspacer"></span>
    <a class="vbtn cmp-step" data-step="both-prev" href="{{ steps.both_prev }}" title="both back (←)" aria-label="both back">‹‹</a>
    <a class="vbtn cmp-step" data-step="both-next" href="{{ steps.both_next }}" title="both forward (→)" aria-label="both forward">››</a>
    {# JS-only, like the stage toggle: without JS there are no keys to link,
       and the per-side and both-sides links above step either way. #}
    <button type="button" class="vbtn cmp-link" id="cmp-link" aria-pressed="{{ 'true' if linked else 'false' }}" hidden
            title="linked: ← and → move both sides (L)">{{ '⛓ linked' if linked else '⛓ unlinked' }}</button>
    {% if any_image %}
    <span class="vtoggle" id="vtoggle" hidden>
      <button type="button" class="vseg on" id="btn-fit" aria-pressed="true" title="the whole picture, as large as the stage allows (Z)">Fit</button><button type="button" class="vseg" id="btn-one" aria-pressed="false" title="natural pixels — drag to pan; both stages pan together (Z)">1:1</button>
    </span>
    {% endif %}
    {% if film | selectattr('blurred') | list %}<button type="button" class="reveal-all-btn" data-reveal-all hidden title="blur is cosmetic — the files are still served"><span class="ra-label">👁 reveal all</span><span class="ra-note"> — blur is cosmetic</span></button>{% endif %}
  </div>

  <div class="cmp-body">
  {% for key in ('a', 'b') %}{% set s = sides[key] %}{% set L = key | upper %}
    <section class="cmp-side{% if active == key %} is-active{% endif %}" data-side="{{ key }}" aria-label="side {{ L }}">
      <div class="cmp-head">
        <a class="cmp-step" data-step="{{ key }}-prev" href="{{ steps[key ~ '_prev'] }}" title="{{ L }} back" aria-label="{{ L }} back">‹</a>
        <div class="cmp-label" data-region="label-{{ key }}"><span class="cmp-letter">{{ L }}</span> <span class="ord">{{ num(s.ordinal) }}</span> <span class="cmp-name" title="{{ s.rel }}">{{ s.rel }}</span>{% if s.flagged %} <span class="cmp-flagged">✔ flagged</span>{% endif %}</div>
        <a class="cmp-step" data-step="{{ key }}-next" href="{{ steps[key ~ '_next'] }}" title="{{ L }} forward" aria-label="{{ L }} forward">›</a>
        <a class="cmp-review" href="{{ s.review }}" title="the full review of {{ s.rel }}">review {{ L }}</a>
      </div>
      <div class="cmp-stagewrap">
        <div class="vstage{% if s.kind == 'image' %} is-img{% endif %}{% if s.blurred %} is-blurred{% endif %}" data-side="{{ key }}">
          {% if s.kind == 'image' %}<img src="{{ s.url }}" alt="{{ s.rel }}" draggable="false">
          {% elif s.kind == 'video' %}<video class="cmp-media" controls preload="metadata" src="{{ s.url }}"></video>
          {% else %}<audio class="cmp-media" controls preload="metadata" src="{{ s.url }}"></audio>
          {% endif %}
        </div>
        {# Over the stage, never inside its scrolled content; JS-only, so
           `hidden` until bound (the review's pattern). #}
        {% if s.blurred %}<button type="button" class="reveal cmp-reveal" data-side="{{ key }}" aria-label="reveal {{ L }}" hidden>👁 reveal — blur is cosmetic</button>{% endif %}
      </div>
      <div class="cmp-foot">
        <div class="cmp-flag" data-region="flag-{{ key }}">
          <form class="vflag" method="post" action="/b/{{ name_url }}/flag" data-inplace>
            <input type="hidden" name="target" value="{{ s.rel }}">
            <input type="hidden" name="on" value="{{ '0' if s.flagged else '1' }}">
            <input type="hidden" name="back" value="compare">
            <input type="hidden" name="a" value="{{ sides.a.rel }}">
            <input type="hidden" name="b" value="{{ sides.b.rel }}">
            <input type="hidden" name="side" value="{{ active }}">
            <input type="hidden" name="link" value="{{ '1' if linked else '0' }}">
            <button class="vbtn vflag-btn{% if s.flagged %} is-flagged{% endif %}" id="cmp-flag-{{ key }}"
                    title="{{ 'un-flag' if s.flagged else 'flag' }} {{ L }} ({{ L }})">{{ '✔ flagged' if s.flagged else '○ flag' }} {{ L }} <kbd>{{ L }}</kbd></button>
          </form>
        </div>
        {% if s.caption %}<div class="cmp-cap">{{ s.caption }}</div>{% endif %}
      </div>
    </section>
  {% endfor %}
  </div>

  <div class="cmp-keys"><kbd>←</kbd> <kbd>→</kbd> <kbd>Space</kbd> step · <kbd>A</kbd> <kbd>B</kbd> flag · <kbd>X</kbd> side · <kbd>L</kbd> link · <kbd>Z</kbd> Fit/1:1 · <kbd>Esc</kbd> review</div>

  {# THE FILMSTRIP IS THE PICKER: the review ring in ring order. Without JS a
     frame is a link that replaces the active side from the URL (B by
     default); with JS a click replaces the side that is active NOW. #}
  <nav class="film" data-region="film" aria-label="pick from the set">
  {% for x in film %}
    <a class="film-f{% if x.flagged %} is-flagged{% endif %}{% if x.blurred %} is-blurred{% endif %}{% if x.is_a %} is-a{% endif %}{% if x.is_b %} is-b{% endif %}{% if (active == 'a' and x.is_a) or (active == 'b' and x.is_b) %} is-active{% endif %}"
       href="{{ x.pick }}" data-rel="{{ x.name }}" data-pick-a="{{ x.pick_a }}" data-pick-b="{{ x.pick_b }}" title="{{ x.name }}">
      {%- if x.kind == 'image' %}<img loading="lazy" decoding="async" src="{{ x.thumb or x.url }}" alt="">{% else %}<span class="film-kind">{{ '♪' if x.kind == 'audio' else '▶' }}</span>{% endif -%}
      <span class="film-ord">{{ num(x.ordinal) }}</span>
      {%- if x.is_a or x.is_b %}<span class="film-ab">{{ 'A' if x.is_a }}{{ 'B' if x.is_b }}</span>{% endif -%}
    </a>
  {% endfor %}
  </nav>
</div>
{% include "_stage_js.html" %}
<script>
  (function () {
    var BACK = {{ back_url|tojson }};
    var d = document.documentElement;
    var root = document.querySelector('.viewer.compare');
    var sides = {a: root.querySelector('.cmp-side[data-side="a"]'),
                 b: root.querySelector('.cmp-side[data-side="b"]')};
    /* THE VIEW STATE (r3 C2): the active side and the linked stepping, read
       from the server's render of THIS URL, and written back into the URL in
       place whenever they change, so every step — a full page load — keeps
       them. Kept on the sides (never on a region: a save swaps regions). */
    var active = sides.a.classList.contains('is-active') ? 'a' : 'b';
    var linked = root.getAttribute('data-linked') !== '0';

    /* A compare href with THIS page's view state: `side` and `link` dropped
       and re-added from the closed set, the pair's own params untouched (their
       encoding is the server's, never re-serialised here). */
    function withState(href) {
      var i = href.indexOf('?');
      if (i < 0) return href;
      var parts = href.slice(i + 1).split('#')[0].split('&').filter(function (p) {
        /* by the DECODED name: `%73ide=a` is `side=a` to the server */
        var n = p.split('=')[0];
        try { n = decodeURIComponent(n.replace(/\+/g, ' ')); } catch (e) {}
        return p && n !== 'side' && n !== 'link';
      });
      if (active === 'a') parts.push('side=a');
      if (!linked) parts.push('link=0');
      return href.slice(0, i) + '?' + parts.join('&');
    }
    function go(href) { window.location.href = href; }
    /* Every server-built link, the URL and the flag forms' landing fields
       follow the state; the strip's markers follow the active side. Run on
       every change of state and after a save swaps the regions. */
    function restate() {
      ['a', 'b'].forEach(function (k) { sides[k].classList.toggle('is-active', k === active); });
      document.querySelectorAll('.film-f').forEach(function (f) {
        f.classList.toggle('is-active', f.classList.contains('is-' + active));
        var pick = f.getAttribute('data-pick-' + active);
        if (pick) f.setAttribute('href', withState(pick));
      });
      document.querySelectorAll('a[data-step]').forEach(function (a) {
        a.setAttribute('href', withState(a.getAttribute('href')));
      });
      document.querySelectorAll('.cmp-flag form').forEach(function (f) {
        var sd = f.querySelector('input[name="side"]'), ln = f.querySelector('input[name="link"]');
        if (sd) sd.value = active;
        if (ln) ln.value = linked ? '1' : '0';
      });
      root.setAttribute('data-linked', linked ? '1' : '0');
      try { history.replaceState(history.state, '', withState(location.pathname + location.search)); } catch (e) {}
    }
    function setActive(k) { if (k !== active) { active = k; restate(); } }

    /* THE LINKED TOGGLE (C3): JS-only, because without JS there are no keys to
       link; its state is the URL's `link`, and nothing else remembers it. */
    var lbtn = document.getElementById('cmp-link');
    function showLinked() {
      lbtn.setAttribute('aria-pressed', linked ? 'true' : 'false');
      lbtn.textContent = linked ? '⛓ linked' : '⛓ unlinked';
    }
    function setLinked(on) { linked = on; showLinked(); restate(); }
    lbtn.hidden = false;
    showLinked();
    lbtn.addEventListener('click', function () { setLinked(!linked); });

    /* THE STAGES (C4): the shared machinery, attached once per stage; one mode
       for both, bound once, and only when a side is a picture. This page owns
       its own ResizeObserver, because `pannable` changes on resize. */
    var stages = ['a', 'b'].map(function (k) {
      var el = sides[k].querySelector('.vstage');
      return {k: k, el: el, st: BoothStage.attach(el, {img: el.querySelector('img')})};
    });
    function settleAll() { stages.forEach(function (s) { s.st.settle(); }); }
    var mode = null, toggle = document.getElementById('vtoggle');
    if (toggle) mode = BoothMode.bind({
      toggle: toggle,
      fit: document.getElementById('btn-fit'),
      one: document.getElementById('btn-one'),
      onChange: settleAll
    });
    if (window.ResizeObserver) {
      var ro = new ResizeObserver(settleAll);
      stages.forEach(function (s) { ro.observe(s.el); });
    } else window.addEventListener('resize', settleAll);
    /* A press on a stage makes its side the active one. */
    stages.forEach(function (s) {
      s.el.addEventListener('pointerdown', function () { setActive(s.k); });
    });

    /* SYNCED PAN (C4). In 1:1 a scroll of either stage — a drag, a scrollbar,
       a wheel — puts the other at the SAME FRACTION of its own scrollable
       range, per axis; an axis with nothing to scroll on either side is left
       alone. A scroll the sync caused is recognised by where it landed and is
       never synced back, so there is no loop and no drift. */
    function sync(from, to) {
      var fx = from.scrollWidth - from.clientWidth, fy = from.scrollHeight - from.clientHeight;
      var tx = to.scrollWidth - to.clientWidth, ty = to.scrollHeight - to.clientHeight;
      var l = to.scrollLeft, t = to.scrollTop;
      if (fx > 0 && tx > 0) l = from.scrollLeft / fx * tx;
      if (fy > 0 && ty > 0) t = from.scrollTop / fy * ty;
      var was = [to.scrollLeft, to.scrollTop];
      to.scrollTo(l, t);
      if (to.scrollLeft !== was[0] || to.scrollTop !== was[1]) to.__synced = {l: to.scrollLeft, t: to.scrollTop};
    }
    stages.forEach(function (s, i) {
      var other = stages[1 - i].el;
      s.el.addEventListener('scroll', function () {
        var mine = s.el.__synced;
        if (mine) {
          s.el.__synced = null;
          if (Math.abs(s.el.scrollLeft - mine.l) < 1 && Math.abs(s.el.scrollTop - mine.t) < 1) return;
        }
        if (!d.classList.contains('stage-one') || other === s.el) return;
        sync(s.el, other);
      }, {passive: true});
    });

    /* Blur reveal per side — per-viewer, never persisted; cosmetic, and the
       button says so. Over the stage, never in its scrolled content. */
    root.querySelectorAll('.cmp-reveal').forEach(function (btn) {
      var stage = sides[btn.getAttribute('data-side')].querySelector('.vstage');
      btn.hidden = false;
      btn.addEventListener('click', function () {
        var on = stage.classList.toggle('revealed');
        btn.textContent = on ? '🙈 hide' : '👁 reveal — blur is cosmetic';
      });
    });

    /* THE PICKER (C2): a click on a frame replaces the side that is active
       NOW. Delegated at the document, because a save replaces the frames. A
       modified click keeps the browser's own meaning (a new tab), with the
       href restate() keeps current. */
    document.addEventListener('click', function (e) {
      var f = e.target.closest && e.target.closest('.film-f');
      if (!f || e.defaultPrevented || e.button !== 0) return;
      if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
      var pick = f.getAttribute('data-pick-' + active);
      if (!pick) return;
      e.preventDefault();
      go(withState(pick));
    });
    document.addEventListener('booth:swapped', restate);

    /* THE KEYS (C3). EVERY key here is ignored while focus is in something
       editable and whenever Ctrl, Meta or Alt is held (the review's rule,
       applied to all of them). */
    function isEditable(el) {
      return !!(el && (el.isContentEditable ||
                       /^(input|textarea|select)$/i.test(el.tagName || '')));
    }
    function step(dir) {
      var which = (linked ? 'both' : active) + (dir < 0 ? '-prev' : '-next');
      var a = document.querySelector('a[data-step="' + which + '"]');
      if (a) go(withState(a.getAttribute('href')));
    }
    document.addEventListener('keydown', function (e) {
      if (isEditable(e.target)) return;
      if (e.metaKey || e.ctrlKey || e.altKey) return;
      var k = e.key;
      if (k === 'Escape' || k === 'c' || k === 'C') go(BACK);
      else if (k === 'ArrowLeft') step(-1);
      else if (k === 'ArrowRight') step(1);
      /* Space steps only from nowhere in particular: never from a focused
         control (Space presses it) and never from a player on either stage. */
      else if (k === ' ') {
        if (e.target.closest && e.target.closest('button, a, summary, video, audio')) return;
        e.preventDefault();
        step(e.shiftKey ? -1 : 1);
      }
      else if (k === 'a' || k === 'A' || k === 'b' || k === 'B') {
        /* looked up at press time: a save may have replaced the button */
        var btn = document.getElementById('cmp-flag-' + k.toLowerCase());
        if (btn) { e.preventDefault(); btn.click(); }
      }
      else if (k === 'x' || k === 'X') setActive(active === 'a' ? 'b' : 'a');
      else if (k === 'l' || k === 'L') setLinked(!linked);
      else if ((k === 'z' || k === 'Z') && mode) mode.flip();
    });
  })();
</script>
{% endblock %}