{{define "items"}}
<ol class="items items--{{.Layout}} aspect-{{.Category.Aspect}}" data-items data-list-title="{{.Title}}" 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">
        {{- if .Image}}<img src="{{.Image}}" alt="" loading="lazy" decoding="async">{{else}}<span class="art-fallback">{{icon $.Category.Icon}}</span>{{end -}}
        <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>
        {{- 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}}
        {{- with .Note}}<span class="item-note">{{.}}</span>{{end}}
      </span>
    </button>
    {{- 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}}
  </li>
  {{- end}}
</ol>
<script type="application/json" class="items-data">{{.Items}}</script>
{{end}}