{{/*
  ranked draws a list in its style. Takes: Items, Category, Style, Title,
  and optionally AllLink/Total (home page: link to the full list).
  Podium and Spotlight feature #1, so a page that doesn't start at #1 falls
  back to a plain list.
*/}}
{{define "ranked"}}
{{- $featured := and (or (eq .Style "podium") (eq .Style "spotlight")) (eq (index .Items 0).Rank 1)}}
<div class="ranked ranked--{{if $featured}}{{.Style}}{{else}}{{flatLayout .Style}}{{end}} aspect-{{.Category.Aspect}}" data-items data-list-title="{{.Title}}">
  {{- if and $featured (eq .Style "podium")}}{{template "podium" .}}
  {{- else if $featured}}{{template "spotlight" .}}
  {{- else}}{{template "items" (dict "Items" .Items "Category" .Category "Layout" (flatLayout .Style))}}
  {{- end}}
  <script type="application/json" class="items-data">{{.Items}}</script>
</div>
{{end}}

{{define "podium"}}
{{- $c := .Category}}
{{- $top := first 3 .Items}}
<ol class="podium podium--{{len $top}}">
  {{- range $top}}
  <li class="podium-spot podium-spot--{{.Rank}}">
    <button type="button" class="item-btn podium-card" data-item="{{.ID}}">
      <span class="item-art">{{template "art" (dict "Item" . "Icon" $c.Icon)}}</span>
      <span class="item-body">
        <span class="item-title"><span class="sr-only">#{{.Rank}}: </span>{{.Title}}</span>
        {{- template "itemsub" .}}
      </span>
    </button>
    {{- template "playbtn" .}}
    <span class="podium-step" aria-hidden="true"><span>{{.Rank}}</span></span>
  </li>
  {{- end}}
</ol>
{{- $rest := after 3 .Items}}
{{- if $rest}}
<details class="more">
  <summary class="more-btn"><span class="more-closed">Show {{len $rest}} more</span><span class="more-open">Show less</span>{{icon "chevron-down"}}</summary>
  {{template "items" (dict "Items" $rest "Category" $c "Layout" "rows")}}
  {{- if .AllLink}}<a class="more-all" href="{{.AllLink}}">See all {{num .Total}}{{icon "arrow-right"}}</a>{{end}}
</details>
{{- else if .AllLink}}
<a class="more-all" href="{{.AllLink}}">See all {{num .Total}}{{icon "arrow-right"}}</a>
{{- end}}
{{end}}

{{define "spotlight"}}
{{- $c := .Category}}
{{- with index .Items 0}}
<article class="spotlight">
  {{- if .Image}}<div class="spotlight-bg" aria-hidden="true"><img src="{{.Image}}" alt=""></div>{{end}}
  <div class="spotlight-art">
    <button type="button" class="item-btn" data-item="{{.ID}}" aria-label="#1: {{.Title}}">
      <span class="item-art">{{template "art" (dict "Item" . "Icon" $c.Icon)}}</span>
    </button>
    {{- template "playbtn" .}}
  </div>
  <div class="spotlight-body">
    <p class="spotlight-rank">#1</p>
    <h3 class="spotlight-title">{{.Title}}</h3>
    {{- template "itemsub" .}}
    {{- with .Note}}<blockquote class="spotlight-note">{{.}}</blockquote>
    {{- else}}{{with .Description}}<p class="spotlight-desc">{{.}}</p>{{end}}{{end}}
    <button type="button" class="btn btn--sm spotlight-more" data-item="{{.ID}}">More about it{{icon "arrow-right"}}</button>
  </div>
</article>
{{- end}}
{{- $rest := after 1 .Items}}
{{- if $rest}}{{template "items" (dict "Items" $rest "Category" $c "Layout" "rows")}}{{end}}
{{- if .AllLink}}<a class="more-all" href="{{.AllLink}}">See all {{num .Total}}{{icon "arrow-right"}}</a>{{end}}
{{end}}