{{ define "main" }}
<div class="mx-auto px-4 py-12 max-w-5xl">
  <h1 class="text-4xl md:text-5xl font-bold text-accent mb-12">
    {{ .Title }}
  </h1>

  {{ $pinned := where .Pages "Params.pinned" true }}
  {{ $unpinned := where .Pages "Params.pinned" false }}
  {{ if eq (len $unpinned) 0 }}
    {{ $unpinned = where .Pages "Params.pinned" nil }}
    {{ if eq (len $unpinned) 0 }}
      {{ $unpinned = where .Pages "Params.pinned" "" }}
    {{ end }}
  {{ end }}

  {{ $allPages := ($pinned | append $unpinned) }}

  {{ if eq (len $allPages) 0 }}
  <div class="py-12 text-center text-text-dim">
    {{ i18n "noRelated" }}
  </div>
  {{ else }}
  <ol class="timeline" aria-label="{{ .Title }}">
    {{ range $i, $page := (sort $pinned "Date" "desc") }}
      {{ $side := "left" }}
      {{ if eq (mod $i 2) 0 }}{{ $side = "left" }}{{ else }}{{ $side = "right" }}{{ end }}
      {{ partial "article-list-item.html" (dict "Page" $page "side" $side) }}
    {{ end }}
    {{ $offset := len $pinned }}
    {{ range $i, $page := (sort $unpinned "Date" "desc") }}
      {{ $idx := add $i $offset }}
      {{ $side := "left" }}
      {{ if eq (mod $idx 2) 0 }}{{ $side = "left" }}{{ else }}{{ $side = "right" }}{{ end }}
      {{ partial "article-list-item.html" (dict "Page" $page "side" $side) }}
    {{ end }}
  </ol>
  {{ end }}
</div>
{{ end }}