{{ 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">All {{ .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>

    {{ if .Description }}
    <p class="text-xl text-gray-600">{{ .Description }}</p>
    {{ end }}

    {{ .Content }}
  </header>

  <main class="container mx-auto">
    {{ $activeCategory := lower .Title }}
    {{ $products := where .Site.RegularPages "Section" "products" }}
    {{ $filtered := where $products "Params.categories" "intersect" (slice $activeCategory) }}
    {{ $sorted := sort $filtered "Date" "desc" }}

    {{ partial "content/products/collections/list.html" (dict "list" $sorted) }}
  </main>

  <footer class="w-full flex justify-end gap-4">
    <div class="text-center">
      <a href="/products/" class="btn btn-primary-highlight">View Other Products</a>
    </div>
    <div class="text-center">
      <a href="/categories/" class="btn btn-base">View Other Categories</a>
    </div>
  </footer>
</section>
{{ end }}