{{template "header" .}}
<div class="player-page">
  <div>
    <div class="player-wrap">
      <div id="yt" class="player" hidden></div>
      <video id="player" class="player" controls autoplay muted playsinline preload="auto" poster="{{.Video.Thumb}}">
        <source src="{{.Video.Src}}" type="video/mp4">
      </video>
      <div class="cinema-banner" id="cinema-banner">
        <span id="cinema-label">{{.Video.Title}}</span>
        <span>
          <button type="button" class="btn btn-outline" id="pl-prev">Prev</button>
          <button type="button" class="btn btn-outline" id="pl-next">Next</button>
        </span>
      </div>
      <button type="button" class="unmute-pop" id="unmute" hidden>Unmute</button>
      <p id="player-err" class="alert" hidden></p>
      <p class="meta" style="margin-top:8px"><a href="{{.Video.Src}}" target="_blank" rel="noreferrer">Open video file</a>{{if .Related}} · <a href="?playlist={{.Video.ID}}{{range .Related}},{{.ID}}{{end}}">Play all up next</a>{{end}}</p>
      <script src="/static/cinema-player.js?v={{.Version}}"></script>
      <script src="/static/sync.js?v={{.Version}}"></script>
      <script>
      (function () {
        var queue = {{.QueueJSON}};
        var cinema = deimosCinema({
          queue: queue,
          video: document.getElementById('player'),
          yt: document.getElementById('yt'),
          skip: document.getElementById('cinema-skip'),
          label: document.getElementById('cinema-label'),
          unmute: document.getElementById('unmute'),
          prev: document.getElementById('pl-prev'),
          next: document.getElementById('pl-next'),
          follow: function () { return !!window.deimosFollowing; }
        });
        var clock = cinema.clock();
        (function syncWatch() {
          var q = new URLSearchParams(location.search);
          var room = (q.get('room') || '').trim();
          var leadBox = document.getElementById('sync-lead');
          var status = document.getElementById('sync-status');
          var copyBtn = document.getElementById('sync-copy');
          var roomIn = document.getElementById('sync-room');
          if (roomIn) {
            roomIn.value = room || roomIn.value || '';
            roomIn.onchange = function () {
              var u = new URL(location.href);
              var v = (roomIn.value || '').trim();
              if (v) u.searchParams.set('room', v); else u.searchParams.delete('room');
              location.href = u.toString();
            };
          }
          if (q.get('lead') === '1' && leadBox) leadBox.checked = true;
          var id = location.pathname.replace(/\/$/,'').split('/').pop();
          var tvURL = location.origin + '/tv/watch/' + id + location.search;
          var u = new URL(tvURL);
          if (room) u.searchParams.set('room', room);
          tvURL = u.toString();
          if (leadBox) leadBox.addEventListener('change', function () {
            if (leadBox.checked && !q.get('room')) {
              var next = new URL(location.href);
              next.searchParams.set('room', (roomIn && roomIn.value.trim()) || 'cinema');
              next.searchParams.set('lead', '1');
              location.href = next.toString();
            }
          });
          var ctl = window.deimosSync ? deimosSync({
              room: room, id: id, clock: clock, status: status,
              watchPath: '/watch/',
              pro: {{if .License.Pro}}true{{else}}false{{end}},
              isLead: function () { return leadBox && leadBox.checked; }
            }) : null;
          if (leadBox) leadBox.addEventListener('change', function () { if (ctl && leadBox.checked) ctl.post(); });
          if (copyBtn) copyBtn.onclick = function () {
            var share = tvURL;
            if (!room && roomIn && roomIn.value) {
              var s = new URL(share); s.searchParams.set('room', roomIn.value); share = s.toString();
            }
            navigator.clipboard.writeText(share).then(function () {
              copyBtn.textContent = 'Copied';
              setTimeout(function () { copyBtn.textContent = 'Copy TV link'; }, 1500);
            }).catch(function () { prompt('TV link', share); });
          };
        })();
      })();
      </script>
      {{if not .License.Pro}}
        <div class="wm">Deimos.TV · Free</div>
      {{end}}
    </div>
    <div class="video-info">
      <h1>{{.Video.Title}}</h1>
      <div class="meta">{{.Video.Channel}} · {{.Video.Views}} views · {{.Video.Duration}}</div>
      <div class="sync-bar" id="sync-bar">
        {{if .License.Pro}}
        <label>Room <input type="text" id="sync-room" value="{{if .Query}}{{.Query}}{{end}}" placeholder="party code" style="width:8rem"></label>
        <label><input type="checkbox" id="sync-lead"> I am the remote (lead)</label>
        <button type="button" class="btn btn-outline" id="sync-copy">Copy TV link</button>
        <span class="meta" id="sync-status">{{if .Query}}Joining this TV…{{else}}Tick I am the remote, or open Together{{end}}</span>
        {{else}}
        <span class="meta" id="sync-status">Watch together needs Pro.</span>
        {{end}}
      </div>
      {{template "sync-gate" .}}
      <div class="chips">
        <span class="chip">{{.Video.Category}}</span>
      </div>
      <div class="desc">{{.Video.Description}}</div>
    </div>
  </div>
  <div>
    <h3>Up next</h3>
    {{range .Related}}
    <a class="card" href="/watch/{{.ID}}" style="margin-bottom:14px">
      <div class="thumb"><img src="{{.Thumb}}" alt=""><span class="duration">{{.Duration}}</span></div>
      <h3>{{.Title}}</h3>
      <div class="meta">{{.Channel}}</div>
    </a>
    {{end}}
  </div>
</div>
{{template "footer" .}}