{{template "header" .}}
<div class="toolbar">
  <div>
    <p class="kicker">IPTV</p>
    <h1>{{if .IPTVList}}{{.IPTVList.Name}}{{else}}Channels{{end}}</h1>
    <p class="meta">{{len .IPTVChannels}} {{if eq .IPTVList.Kind "vod"}}titles{{else}}streams{{end}}{{if .IPTVList}} · {{.IPTVList.Count}} in playlist{{end}}{{if .IPTVList.EPG}} · EPG on{{end}}</p>
  </div>
  <div class="toolbar-actions">
    {{if .IPTVList}}<a class="btn btn-green" href="/iptv/guide/{{.IPTVList.ID}}">Guide</a>{{end}}
    <a class="btn btn-outline" href="/iptv">All playlists</a>
  </div>
</div>
<form class="search" action="/iptv/{{if .IPTVList}}{{.IPTVList.ID}}{{end}}" method="get" style="max-width:420px;margin:0 0 16px">
  <input name="q" value="{{.Query}}" placeholder="Search channels" autocomplete="off">
  <button type="submit">Search</button>
</form>
{{if .IPTVGroups}}
<div class="chips" style="margin-bottom:16px">
  <a class="chip" href="/iptv/{{.IPTVList.ID}}">All</a>
  {{range .IPTVGroups}}
    <a class="chip" href="/iptv/{{$.IPTVList.ID}}?g={{.}}">{{.}}</a>
  {{end}}
</div>
{{end}}
<div class="grid iptv-grid">
  {{range .IPTVChannels}}
  {{$now := index $.EPGByID .ID}}
  <a class="card" href="/iptv/ch/{{.ID}}">
    <div class="thumb iptv-thumb">
      {{if .Logo}}<img src="{{.Logo}}" alt="" loading="lazy">{{else}}<span class="iptv-letter">{{.Name}}</span>{{end}}
    </div>
    <h3>{{.Name}}</h3>
    <div class="meta">{{if $now.Title}}{{$now.Title}}{{else}}{{.Group}}{{end}}</div>
  </a>
  {{end}}
</div>
{{if not .IPTVChannels}}<p class="meta">No channels match.</p>{{end}}
{{template "footer" .}}