{{template "header" .}}
<div class="toolbar">
  <div>
    <p class="kicker">Guide</p>
    <h1>{{if .IPTVList}}{{.IPTVList.Name}}{{else}}TV Guide{{end}}</h1>
    <p class="meta">Now and next{{if .IPTVList.EPG}} · XMLTV loaded{{else}} · add an EPG URL on import{{end}} · <a href="/guide">IPTV help</a></p>
  </div>
  <div class="toolbar-actions">
    {{if .IPTVList}}<a class="btn btn-outline" href="/iptv/{{.IPTVList.ID}}">Channels</a>{{end}}
    <a class="btn btn-outline" href="/iptv">All playlists</a>
  </div>
</div>
{{if not .IPTVList.EPG}}
<p class="alert">This playlist has no EPG URL. Re-import it and paste an XMLTV link, or use a playlist whose first line has <code>url-tvg</code>.</p>
{{end}}
<div class="epg-guide">
  {{range .IPTVChannels}}
  {{$now := index $.EPGByID .ID}}
  <a class="epg-row {{if $now.Title}}has{{end}}" href="/iptv/ch/{{.ID}}">
    <span class="epg-ch">
      <span class="iptv-rail-thumb">{{if .Logo}}<img src="{{.Logo}}" alt="" loading="lazy">{{else}}<span class="iptv-letter">{{.Name}}</span>{{end}}</span>
      <span>
        <b>{{.Name}}</b>
        <em>{{.Group}}</em>
      </span>
    </span>
    <span class="epg-slot now">
      {{if $now.Title}}
        <span class="kicker">Now</span>
        <strong>{{$now.Title}}</strong>
        <em>{{$now.When}}</em>
        <span class="epg-bar"><i style="width:{{$now.Progress}}%"></i></span>
      {{else}}
        <span class="meta">No guide for this channel</span>
      {{end}}
    </span>
    <span class="epg-slot next">
      {{if $now.Next}}
        <span class="kicker">Next</span>
        <strong>{{$now.Next}}</strong>
      {{end}}
    </span>
  </a>
  {{end}}
</div>
{{if not .IPTVChannels}}<p class="meta">No channels.</p>{{end}}
{{template "footer" .}}