{{ define "main" }}
<section class="my-12 grid gap-6">
  <header class="grid gap-4 text-center">
    <h1 class="text-4xl font-mono font-bold text-center">{{ .Title }}</h1>

    <nav class="box box-sm opacity-65">
      <ul id="breadcrumbs" class="flex justify-center gap-2">
        {{- range .Ancestors.Reverse }}
        <li class="btn-link"><a href="{{ .Permalink }}">{{ .Title }}</a></li> <span>/</span>
        {{- end }}
        <li class="font-thin">{{ .Title }}</li>
      </ul>
    </nav>

    {{ $categories := .Site.Taxonomies.categories }}
    <h2 class="font-thin">Jump to a category</h2>
    <div class="w-full flex flex-wrap justify-center gap-4 mb-6">
      {{ range $category, $pages := $categories }}
        <a href="#{{ $category | urlize }}" class="btn btn-xl btn-primary">
          {{ $category | title }}
        </a>
      {{ end }}
    </div>
  </header>

  <main class="grid gap-6">
  {{ range $category, $weightedPages := $categories }}
    <h2 id="{{ $category | urlize }}" class="text-4xl font-extralight mt-8">{{ $category | title }}</h2>
    {{ $topPages := first 7 . }}
    {{ partial "content/products/collections/list.html" (dict "list" $topPages "drillsDown" true "category" $category "total" .Count) }}
  {{ end }}
  </main>

</section>
{{ end }}