{{template "header" .}}
{{if .Videos}}
  <h1 style="margin-top:0">{{.Heading}}</h1>
  <div class="grid">
    {{range .Videos}}
    <a class="card" href="/watch/{{.ID}}">
      <div class="thumb">
        <img src="{{.Thumb}}" alt="">
        <span class="duration">{{.Duration}}</span>
      </div>
      <h3>{{.Title}}</h3>
      <div class="meta">{{.Channel}} · {{.Views}} views · {{.Category}}</div>
    </a>
    {{end}}
  </div>
{{else}}
  <div class="hero-empty">
    <div class="hero-stage">
      {{if .Cinema}}
      <p>The shelf is empty. Super can load Blender open movies under Admin.</p>
      {{end}}
      <div class="hero-actions">
        <a class="btn btn-green" href="{{if $.User}}/upload{{else}}/login{{end}}">Add a video</a>
        <a class="btn btn-outline" href="/iptv">IPTV</a>
        {{if .Cinema}}<a class="btn btn-outline" href="/games">Games</a>{{end}}
      </div>
      {{if not .Cinema}}
      <div class="tip-row" id="empty-tip">
        <div class="chat-win tv-glass">
          <span class="tv-orb tv-orb-a" aria-hidden="true"></span>
          <span class="tv-orb tv-orb-b" aria-hidden="true"></span>
          <span class="tip-led" aria-hidden="true"></span>
          <div class="chat-bar">
            <div class="tip-face">
              <img class="tip-avatar" src="/static/img/logo.png" alt="">
            </div>
            <div class="chat-who">
              <b>Deimos.TV</b>
              <span class="chat-on">Live</span>
            </div>
            <button class="tip-x" type="button" id="empty-tip-x" aria-label="Close">×</button>
          </div>
          <div class="chat-body">
            <p class="kicker">Welcome</p>
            <p>This player starts <em>empty</em> — no demo films. Add your own <strong>MP4</strong>, <strong>YouTube</strong>, or playlist URL. Connect <strong>Storj / S3</strong> under Storage if you host files in the cloud.</p>
          </div>
          <div class="chat-foot">
            <button class="tip-ok" type="button" id="empty-tip-ok">Got it</button>
          </div>
          <span class="tv-sheen" aria-hidden="true"></span>
          <span class="tip-led tip-led-b" aria-hidden="true"></span>
        </div>
      </div>
      <script>
      (function(){
        var k = 'deimos.emptyTip.v5';
        try {
          localStorage.removeItem('deimos.emptyTip.v1');
          localStorage.removeItem('deimos.emptyTip.v2');
          localStorage.removeItem('deimos.emptyTip.v3');
          localStorage.removeItem('deimos.emptyTip.v4');
        } catch(e){}
        var row = document.getElementById('empty-tip');
        if (!row) return;
        if (localStorage.getItem(k) === '1') { row.remove(); return; }
        document.documentElement.classList.add('tip-open');
        function close(){
          localStorage.setItem(k,'1');
          row.classList.add('off');
          document.documentElement.classList.remove('tip-open');
          setTimeout(function(){ row.remove(); }, 280);
        }
        var x = document.getElementById('empty-tip-x');
        var ok = document.getElementById('empty-tip-ok');
        if (x) x.onclick = close;
        if (ok) ok.onclick = close;
      })();
      </script>
      {{end}}
    </div>
  </div>
{{end}}
{{template "footer" .}}