{{define "items"}}
<ol class="items items--{{.Layout}}" start="{{with index .Items 0}}{{.Rank}}{{end}}">
  {{- range .Items}}
  <li class="item{{if le .Rank 3}} item--top item--top{{.Rank}}{{end}}">
    <button type="button" class="item-btn" data-item="{{.ID}}">
      <span class="item-art">
        {{- template "art" (dict "Item" . "Icon" $.Category.Icon)}}
        <span class="rank-badge" aria-hidden="true">{{.Rank}}</span>
      </span>
      <span class="item-rank" aria-hidden="true">{{.Rank}}</span>
      <span class="item-body">
        <span class="item-title"><span class="sr-only">#{{.Rank}}: </span>{{.Title}}</span>
        {{- template "itemsub" .}}
        {{- with .Note}}<span class="item-note">{{.}}</span>{{end}}
      </span>
    </button>
    {{- template "playbtn" .}}
  </li>
  {{- end}}
</ol>
{{end}}

{{/* Shared bits of an entry. */}}
{{define "art"}}{{if .Item.Image}}<img src="{{.Item.Image}}" alt="" loading="lazy" decoding="async">{{else}}<span class="art-fallback">{{icon .Icon}}</span>{{end}}{{end}}

{{define "itemsub"}}
{{- if .Badge}}
{{- with .Subtitle}}<span class="item-sub">{{.}}</span>{{end}}
<span class="item-tags"><span class="badge">{{.Badge}}</span>{{with .Year}}<span class="item-year">{{.}}</span>{{end}}</span>
{{- else if or .Subtitle .Year}}
<span class="item-sub">{{.Subtitle}}{{if and .Subtitle .Year}}<span class="dot" aria-hidden="true">·</span>{{end}}{{.Year}}</span>
{{- end}}
{{- end}}

{{define "playbtn"}}{{if .Preview}}<button type="button" class="play-btn" data-preview-src="/preview/{{.ID}}" aria-pressed="false" aria-label="Play a preview of {{.Title}}" title="Play 30-second preview">{{icon "play"}}{{icon "pause"}}</button>{{end}}{{end}}