{{template "header" .}}
<div class="player-page iptv-watch">
  <div>
    <div class="player-wrap">
      {{if eq .IPTVCh.Kind "youtube"}}
        <div class="player yt-lite" id="yt-lite" data-id="{{.IPTVCh.URL}}"></div>
        <script src="/static/cinema-player.js?v={{.Version}}"></script>
        <script>deimosLiteYT(document.getElementById('yt-lite'), {{printf "%q" .IPTVCh.URL}}, { title: {{printf "%q" .IPTVCh.Name}} });</script>
      {{else if eq .IPTVCh.Kind "twitch"}}
        <iframe class="player" src="https://player.twitch.tv/?channel={{.IPTVCh.URL}}&parent=localhost&autoplay=true&muted=true" allowfullscreen></iframe>
      {{else}}
        <video id="player" class="player" controls autoplay muted playsinline></video>
        <button type="button" class="unmute-pop" id="unmute" hidden>Unmute</button>
        <p id="iptv-err" class="alert" hidden></p>
        <script src="/static/vendor/hls.min.js?v={{.Version}}"></script>
        <script src="/static/vendor/mpegts.min.js?v={{.Version}}"></script>
        <script src="/static/iptv-player.js?v={{.Version}}"></script>
        <script>
        (function () {
          var v = document.getElementById('player');
          var btn = document.getElementById('unmute');
          deimosIPTV({
            src: {{.IPTVCh.URL}},
            kind: {{.IPTVCh.Kind}},
            video: v,
            unmute: btn,
            error: document.getElementById('iptv-err')
          });
        })();
        </script>
      {{end}}
      <div class="epg-card" id="epg-card" {{if not .EPGNow}}hidden{{end}}>
        <span class="kicker">Now</span>
        <b id="epg-title">{{if .EPGNow}}{{.EPGNow.Title}}{{end}}</b>
        <em id="epg-when">{{if .EPGNow}}{{.EPGNow.When}}{{end}}</em>
        <span class="epg-bar"><i id="epg-bar" style="width:{{if .EPGNow}}{{.EPGNow.Progress}}{{else}}0{{end}}%"></i></span>
        <span class="next" id="epg-next">{{if .EPGNow}}{{if .EPGNow.Next}}Next · {{.EPGNow.Next}}{{end}}{{end}}</span>
      </div>
    </div>
    <div class="video-info">
      {{if .IPTVCh.Logo}}<img class="iptv-logo" src="{{.IPTVCh.Logo}}" alt="">{{end}}
      <h1>{{.IPTVCh.Name}} <span class="live-dot">LIVE</span></h1>
      <div class="meta">{{.IPTVCh.Group}} · {{.IPTVCh.Kind}}{{if .IPTVList.EPG}} · guide{{end}}</div>
      <p>
        {{if .IPTVList}}<a class="btn btn-green" href="/iptv/guide/{{.IPTVList.ID}}">Guide</a>{{end}}
        <a class="btn btn-outline" href="/iptv/{{.IPTVCh.PlaylistID}}">Back to playlist</a>
      </p>
    </div>
  </div>
  {{if .IPTVChannels}}
  <aside class="iptv-rail" id="iptv-rail">
    <p class="kicker">Up next</p>
    <h2>{{if .IPTVList}}{{.IPTVList.Name}}{{else}}Playlist{{end}}</h2>
    <p class="meta">{{len .IPTVChannels}} titles</p>
    <div class="iptv-rail-list">
      {{range .IPTVChannels}}
      {{$now := index $.EPGByID .ID}}
      <a class="iptv-rail-item {{if eq .ID $.IPTVCh.ID}}on{{end}}" href="/iptv/ch/{{.ID}}" title="{{.Name}}">
        <span class="iptv-rail-thumb">
          {{if .Logo}}<img src="{{.Logo}}" alt="" loading="lazy">{{else}}<span class="iptv-letter">{{.Name}}</span>{{end}}
        </span>
        <span class="iptv-rail-copy">
          <b>{{.Name}}</b>
          <em>{{if $now.Title}}{{$now.Title}}{{else if .Group}}{{.Group}}{{else}}Live{{end}}</em>
        </span>
      </a>
      {{end}}
    </div>
  </aside>
  <script>
  (function(){
    var on = document.querySelector('.iptv-rail-item.on');
    if (on && on.scrollIntoView) on.scrollIntoView({block:'nearest'});
    var card = document.getElementById('epg-card');
    if (!card) return;
    var ch = {{.IPTVCh.ID}};
    function paint(d) {
      if (!d || !d.now || !d.now.title) { card.hidden = true; return; }
      card.hidden = false;
      var t = document.getElementById('epg-title');
      var w = document.getElementById('epg-when');
      var n = document.getElementById('epg-next');
      var b = document.getElementById('epg-bar');
      if (t) t.textContent = d.now.title;
      if (w) w.textContent = d.now.when || '';
      if (b) b.style.width = (d.now.progress || 0) + '%';
      if (n) n.textContent = d.now.next ? ('Next · ' + d.now.next) : '';
    }
    setInterval(function () {
      fetch('/iptv/epg.json?ch=' + encodeURIComponent(ch)).then(function (r) { return r.json(); }).then(paint).catch(function () {});
    }, 60000);
  })();
  </script>
  {{end}}
</div>
{{template "footer" .}}