{{define "bodyclass"}}page-list{{end}}
{{define "content"}}
{{with .Data}}
<section class="list-hero{{if .Hero}} list-hero--art{{end}}">
  {{if .Hero}}<div class="list-hero-backdrop" aria-hidden="true"><img src="{{.Hero.Image}}" alt=""></div>{{end}}
  <div class="container list-hero-inner">
    <a class="back-link" href="/">{{icon "arrow-left"}}All lists</a>
    <div class="list-hero-row">
      <div>
        {{if ne .Category.Key "custom"}}<p class="eyebrow">{{icon .Category.Icon}}{{.Category.Label}}</p>{{end}}
        <h1 class="list-title">{{.List.Title}}</h1>
        {{with .List.Description}}<p class="list-desc">{{.}}</p>{{end}}
        <p class="list-meta">
          {{num .List.ItemCount}} {{plural .List.ItemCount "entry" "entries"}}{{if lt .List.ItemCount .List.MaxItems}} <span class="muted">of {{num .List.MaxItems}}</span>{{end}}
          {{if not .List.Visible}}<span class="badge badge--warn">{{icon "eye-off"}}Hidden</span>{{end}}
        </p>
      </div>
      <div class="list-actions">
        {{if $.LoggedIn}}<a class="btn btn--ghost" href="/admin/lists/{{.List.ID}}">{{icon "pencil"}}Edit</a>{{if .Items}}{{template "export" .List.Slug}}{{end}}{{end}}
        {{if .Items}}
        <nav class="segmented" aria-label="Style">
          {{- range .Styles}}
          <a href="?style={{.Key}}" title="{{.Label}}"{{if eq .Key $.Data.Style}} aria-current="true"{{end}}>{{icon .Icon}}<span class="sr-only">{{.Label}}</span></a>
          {{- end}}
        </nav>
        {{end}}
      </div>
    </div>
  </div>
</section>

<div class="container list-body">
{{if .Items}}
  {{template "ranked" (dict "Items" .Items "Category" .Category "Style" .Style "Title" .List.Title)}}
  {{if .PageNums}}
  <nav class="pager" aria-label="Pages">
    {{if gt .Page 1}}<a class="pager-btn" href="?page={{add .Page -1}}{{.PageQS}}" rel="prev">{{icon "chevron-left"}}<span class="sr-only">Previous</span></a>{{end}}
    {{range .PageNums}}
      {{if eq . 0}}<span class="pager-gap">…</span>
      {{else if eq . $.Data.Page}}<span class="pager-btn is-current" aria-current="page">{{.}}</span>
      {{else}}<a class="pager-btn" href="?page={{.}}{{$.Data.PageQS}}">{{.}}</a>{{end}}
    {{end}}
    {{if lt .Page .Pages}}<a class="pager-btn" href="?page={{add .Page 1}}{{.PageQS}}" rel="next">{{icon "chevron-right"}}<span class="sr-only">Next</span></a>{{end}}
  </nav>
  {{end}}
{{else}}
  <div class="empty">
    <div class="empty-art">{{icon .Category.Icon}}</div>
    <h2>Nothing here yet</h2>
    <p>This list hasn't been filled in.</p>
  </div>
{{end}}
</div>
{{end}}
{{end}}
{{define "scripts"}}<script type="module" src="/static/js/public.js?v={{.AssetVer}}"></script>{{end}}