{{template "header" .}}
<style>
html[data-home="tv"] .header, html[data-home="tv"] .led, html[data-home="tv"] .site-foot, html[data-home="tv"] .sidebar { display:none !important; }
html[data-home="tv"], html[data-home="tv"] body, html[data-home="tv"] .layout, html[data-home="tv"] .main {
  margin:0 !important; padding:0 !important; overflow:auto !important; height:auto !important; background:#050308;
  scrollbar-width:thin;
}
.bg-pick { min-height:100dvh; padding:18px 16px 80px; background:#050308; color:#eef7ff; }
.bg-pick .top { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:12px; margin-bottom:16px; }
.bg-pick h1 { margin:0; font-size:22px; letter-spacing:.06em; }
.bg-pick .lede { margin:6px 0 0; color:#9aa3ad; font-size:13px; max-width:52rem; }
.bg-pick .links { display:flex; gap:8px; flex-wrap:wrap; }
.bg-pick .links a {
  color:#041018; background:linear-gradient(180deg,#ffd36a,#e8b84a); font-weight:800; text-decoration:none;
  padding:8px 14px; border-radius:999px; font-size:13px;
}
.bg-pick .links a.ghost { background:#12161c; color:#eef7ff; border:1px solid #ffffff22; }
.bg-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; }
.bg-card {
  position:relative; border-radius:16px; overflow:hidden; border:1px solid #ffffff18; background:#0a0c10;
  cursor:pointer; transition:transform .15s ease, box-shadow .15s ease;
}
.bg-card:hover { transform:translateY(-3px); box-shadow:0 12px 28px #000a; }
.bg-card img, .bg-card video { width:100%; height:148px; object-fit:cover; display:block; background:#111; }
.bg-card .cap { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:8px 10px; font-size:12px; font-weight:700; }
.bg-card .tag { font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
.bg-card .tag.on { color:#7efcc3; }
.bg-card .tag.new { color:#ffd36a; }
.bg-card .tag.off { color:#6b7380; }
.bg-card .tag.drop { color:#ff6b7d; }
.bg-card.on-air { box-shadow:0 0 0 2px #12b88688; }
.bg-card.is-new { box-shadow:0 0 0 2px #ffd36a88; }
.bg-card.is-drop { opacity:.42; filter:grayscale(.4); box-shadow:0 0 0 2px #ff6b7d88; }
.bg-card .acts { display:flex; gap:6px; padding:0 10px 10px; }
.bg-card button {
  flex:1; border:0; border-radius:8px; padding:7px 0; font-weight:800; font-size:12px; cursor:pointer;
}
.bg-card .keep { background:#12b886; color:#04140e; }
.bg-card .dump { background:#2a1216; color:#ff8a9a; }
.bg-sum {
  position:sticky; bottom:0; z-index:5; margin:18px -16px -80px; padding:12px 16px 20px;
  background:linear-gradient(#05030800,#050308 28%);
  font-size:13px;
}
.bg-sum b { color:#ffd36a; }
.bg-lightbox {
  display:none; position:fixed; inset:0; z-index:20; background:#000d; place-items:center; padding:16px;
}
.bg-lightbox.on { display:grid; }
.bg-lightbox img, .bg-lightbox video { max-width:96vw; max-height:90vh; border-radius:12px; }
</style>
<div class="bg-pick">
  <div class="top">
    <div>
      <h1>Cinema plates</h1>
      <p class="lede">Green = in the 2-minute home rotation. Gold = new this round. Tap a still to enlarge. Keep or drop, then tell me the plate numbers to remove.</p>
    </div>
    <div class="links">
      <a href="/?home=1">Cinema home</a>
      <a class="ghost" href="/bg?reset=1">Reset marks</a>
    </div>
  </div>
  <div class="bg-grid" id="plates">
    <div class="bg-card on-air" data-id="video" data-state="on"><video src="/static/cinema/bg.mp4" autoplay muted loop playsinline></video><div class="cap"><span>Loop video</span><span class="tag on">in show</span></div><div class="acts"><button class="keep" type="button">Keep</button><button class="dump" type="button">Drop</button></div></div>
    <div class="bg-card" data-id="1" data-state="off"><img src="/static/cinema/bg.jpg" alt="1"><div class="cap"><span>Plate 1 · gold poster</span><span class="tag off">unused</span></div><div class="acts"><button class="keep" type="button">Keep</button><button class="dump" type="button">Drop</button></div></div>
    <div class="bg-card" data-id="3" data-state="off"><img src="/static/cinema/bg-3.jpg" alt="3"><div class="cap"><span>Plate 3 · teal LED</span><span class="tag off">unused</span></div><div class="acts"><button class="keep" type="button">Keep</button><button class="dump" type="button">Drop</button></div></div>
    <div class="bg-card on-air" data-id="4" data-state="on"><img src="/static/cinema/bg-4.jpg" alt="4"><div class="cap"><span>Plate 4 · cyan IMAX</span><span class="tag on">in show</span></div><div class="acts"><button class="keep" type="button">Keep</button><button class="dump" type="button">Drop</button></div></div>
    <div class="bg-card" data-id="5" data-state="off"><img src="/static/cinema/bg-5.jpg" alt="5"><div class="cap"><span>Plate 5 · violet</span><span class="tag off">unused</span></div><div class="acts"><button class="keep" type="button">Keep</button><button class="dump" type="button">Drop</button></div></div>
    <div class="bg-card" data-id="6" data-state="off"><img src="/static/cinema/bg-6.jpg" alt="6"><div class="cap"><span>Plate 6 · magenta</span><span class="tag off">unused</span></div><div class="acts"><button class="keep" type="button">Keep</button><button class="dump" type="button">Drop</button></div></div>
    <div class="bg-card on-air" data-id="7" data-state="on"><img src="/static/cinema/bg-7.jpg" alt="7"><div class="cap"><span>Plate 7 · cyan hall</span><span class="tag on">in show</span></div><div class="acts"><button class="keep" type="button">Keep</button><button class="dump" type="button">Drop</button></div></div>
    <div class="bg-card on-air" data-id="8" data-state="on"><img src="/static/cinema/bg-8.jpg" alt="8"><div class="cap"><span>Plate 8 · crimson</span><span class="tag on">in show</span></div><div class="acts"><button class="keep" type="button">Keep</button><button class="dump" type="button">Drop</button></div></div>
    <div class="bg-card on-air" data-id="9" data-state="on"><img src="/static/cinema/bg-9.jpg" alt="9"><div class="cap"><span>Plate 9 · cool cyan</span><span class="tag on">in show</span></div><div class="acts"><button class="keep" type="button">Keep</button><button class="dump" type="button">Drop</button></div></div>
    <div class="bg-card" data-id="10" data-state="off"><img src="/static/cinema/bg-10.jpg" alt="10"><div class="cap"><span>Plate 10 · purple</span><span class="tag off">unused</span></div><div class="acts"><button class="keep" type="button">Keep</button><button class="dump" type="button">Drop</button></div></div>
    <div class="bg-card on-air" data-id="11" data-state="on"><img src="/static/cinema/bg-11.jpg" alt="11"><div class="cap"><span>Plate 11 · cyan seats</span><span class="tag on">in show</span></div><div class="acts"><button class="keep" type="button">Keep</button><button class="dump" type="button">Drop</button></div></div>
    <div class="bg-card on-air" data-id="12" data-state="on"><img src="/static/cinema/bg-12.jpg" alt="12"><div class="cap"><span>Plate 12 · teal wide</span><span class="tag on">in show</span></div><div class="acts"><button class="keep" type="button">Keep</button><button class="dump" type="button">Drop</button></div></div>
    <div class="bg-card is-new" data-id="13" data-state="new"><img src="/static/cinema/bg-13.jpg" alt="13"><div class="cap"><span>Plate 13 · LED IMAX</span><span class="tag new">new</span></div><div class="acts"><button class="keep" type="button">Keep</button><button class="dump" type="button">Drop</button></div></div>
    <div class="bg-card is-new" data-id="14" data-state="new"><img src="/static/cinema/bg-14.jpg" alt="14"><div class="cap"><span>Plate 14 · crimson IMAX</span><span class="tag new">new</span></div><div class="acts"><button class="keep" type="button">Keep</button><button class="dump" type="button">Drop</button></div></div>
    <div class="bg-card is-new" data-id="15" data-state="new"><img src="/static/cinema/bg-15.jpg" alt="15"><div class="cap"><span>Plate 15 · private OLED</span><span class="tag new">new</span></div><div class="acts"><button class="keep" type="button">Keep</button><button class="dump" type="button">Drop</button></div></div>
    <div class="bg-card is-new" data-id="16" data-state="new"><img src="/static/cinema/bg-16.jpg" alt="16"><div class="cap"><span>Plate 16 · dual LED rails</span><span class="tag new">new</span></div><div class="acts"><button class="keep" type="button">Keep</button><button class="dump" type="button">Drop</button></div></div>
    <div class="bg-card is-new" data-id="17" data-state="new"><img src="/static/cinema/bg-17.jpg" alt="17"><div class="cap"><span>Plate 17 · plate 4 enhanced</span><span class="tag new">new</span></div><div class="acts"><button class="keep" type="button">Keep</button><button class="dump" type="button">Drop</button></div></div>
    <div class="bg-card is-new" data-id="18" data-state="new"><img src="/static/cinema/bg-18.jpg" alt="18"><div class="cap"><span>Plate 18 · navy electric</span><span class="tag new">new</span></div><div class="acts"><button class="keep" type="button">Keep</button><button class="dump" type="button">Drop</button></div></div>
    <div class="bg-card is-new" data-id="19" data-state="new"><img src="/static/cinema/bg-19.jpg" alt="19"><div class="cap"><span>Plate 19 · mint stadium</span><span class="tag new">new</span></div><div class="acts"><button class="keep" type="button">Keep</button><button class="dump" type="button">Drop</button></div></div>
    <div class="bg-card on-air" data-id="20" data-state="on"><img src="/static/cinema/bg-20.jpg" alt="20"><div class="cap"><span>Plate 20 · aisle LED</span><span class="tag on">in show</span></div><div class="acts"><button class="keep" type="button">Keep</button><button class="dump" type="button">Drop</button></div></div>
    <div class="bg-card on-air" data-id="21" data-state="on"><img src="/static/cinema/bg-21.jpg" alt="21"><div class="cap"><span>Plate 21 · back row</span><span class="tag on">in show</span></div><div class="acts"><button class="keep" type="button">Keep</button><button class="dump" type="button">Drop</button></div></div>
    <div class="bg-card on-air" data-id="22" data-state="on"><img src="/static/cinema/bg-22.jpg" alt="22"><div class="cap"><span>Plate 22 · private OLED</span><span class="tag on">in show</span></div><div class="acts"><button class="keep" type="button">Keep</button><button class="dump" type="button">Drop</button></div></div>
    <div class="bg-card on-air" data-id="23" data-state="on"><img src="/static/cinema/bg-23.jpg" alt="23"><div class="cap"><span>Plate 23 · stadium cyan</span><span class="tag on">in show</span></div><div class="acts"><button class="keep" type="button">Keep</button><button class="dump" type="button">Drop</button></div></div>
    <div class="bg-card on-air" data-id="24" data-state="on"><img src="/static/cinema/bg-24.jpg" alt="24"><div class="cap"><span>Plate 24 · low aisle</span><span class="tag on">in show</span></div><div class="acts"><button class="keep" type="button">Keep</button><button class="dump" type="button">Drop</button></div></div>
    <div class="bg-card on-air" data-id="25" data-state="on"><img src="/static/cinema/bg-25.jpg" alt="25"><div class="cap"><span>Plate 25 · space screen</span><span class="tag on">in show</span></div><div class="acts"><button class="keep" type="button">Keep</button><button class="dump" type="button">Drop</button></div></div>
    <div class="bg-card on-air" data-id="26" data-state="on"><img src="/static/cinema/bg-26.jpg" alt="26"><div class="cap"><span>Plate 26 · LED punch</span><span class="tag on">in show</span></div><div class="acts"><button class="keep" type="button">Keep</button><button class="dump" type="button">Drop</button></div></div>
  </div>
  <div class="bg-sum" id="sum">Keep the gold new plates you like. Drop the rest. I will cut them on your word.</div>
</div>
<div class="bg-lightbox" id="box" hidden></div>
<script>
(function () {
  var key = 'dt-plates-v1';
  var box = document.getElementById('box');
  var cards = [].slice.call(document.querySelectorAll('.bg-card'));
  function paint(card, state) {
    card.setAttribute('data-state', state);
    card.classList.toggle('on-air', state === 'on');
    card.classList.toggle('is-new', state === 'new');
    card.classList.toggle('is-drop', state === 'drop');
    var tag = card.querySelector('.tag');
    if (tag) {
      tag.className = 'tag ' + (state === 'on' ? 'on' : state === 'new' ? 'new' : state === 'drop' ? 'drop' : 'off');
      tag.textContent = state === 'on' ? 'in show' : state === 'new' ? 'new' : state === 'drop' ? 'drop' : 'unused';
    }
  }
  function summary() {
    var keep = [], drop = [], fresh = [];
    cards.forEach(function (c) {
      var id = c.getAttribute('data-id');
      var st = c.getAttribute('data-state');
      if (st === 'drop') drop.push(id);
      else if (st === 'new') fresh.push(id);
      else if (st === 'on') keep.push(id);
    });
    document.getElementById('sum').innerHTML = '<b>In show:</b> ' + (keep.join(', ') || '—') +
      ' &nbsp; <b>New (not in rotation yet):</b> ' + (fresh.join(', ') || '—') +
      ' &nbsp; <b>Drop:</b> ' + (drop.join(', ') || 'none');
  }
  try {
    var saved = JSON.parse(localStorage.getItem(key) || '{}');
    cards.forEach(function (c) {
      var id = c.getAttribute('data-id');
      if (saved[id]) paint(c, saved[id]);
    });
  } catch (e) {}
  function save() {
    var o = {};
    cards.forEach(function (c) { o[c.getAttribute('data-id')] = c.getAttribute('data-state'); });
    try { localStorage.setItem(key, JSON.stringify(o)); } catch (e) {}
    summary();
  }
  cards.forEach(function (c) {
    c.addEventListener('click', function (ev) {
      if (ev.target.closest('button')) return;
      var media = c.querySelector('img,video');
      if (!media) return;
      box.innerHTML = media.tagName === 'VIDEO'
        ? '<video src="' + media.currentSrc + '" autoplay muted loop playsinline></video>'
        : '<img src="' + media.src + '" alt="">';
      box.hidden = false;
      box.classList.add('on');
    });
    var keep = c.querySelector('.keep');
    var dump = c.querySelector('.dump');
    if (keep) keep.addEventListener('click', function (ev) { ev.stopPropagation(); paint(c, 'on'); save(); });
    if (dump) dump.addEventListener('click', function (ev) { ev.stopPropagation(); paint(c, 'drop'); save(); });
  });
  box.addEventListener('click', function () { box.classList.remove('on'); box.hidden = true; box.innerHTML = ''; });
  if (location.pathname === '/bg' && location.search.indexOf('reset') !== -1) {
    try { localStorage.removeItem(key); } catch (e) {}
  }
  summary();
})();
</script>
{{template "footer" .}}