{{ define "main" }}
<section class="my-12 grid gap-6">
  {{ partial "partials/image/responsive-bg-pager.html" (dict
    "page" .Page
    "overlayStyles" "grid"
    "contentStyles" "text-xl sm:text-2xl text-center flex justify-center"
    "name" (lower (replace .Page.Title " " "-"))
    "dimensions" "min-h-[24rem]"
  ) }}

  <main class="grid grid-cols-4 gap-4">
    {{/*
      Add product details including:
      - Media Carousel
      - Amazon Details Widget
        - Images/Videos
        - Product Description
        - Product Features
        - Product Price
        - Relevant Products
      
        Add a semantic sidebar element to contain the following:
        - Product Review
        - Top 3 Product Posts
    */}}
    <article class="col-span-4 sm:col-span-4 box box-xl box-white border">{{ .Content }}</article>
  </main>

  <footer>
    {{/*  Comments section  */}}
    
    {{ range .Page.Params.categories }}
    {{ $category := . | lower }}
    <div class="grid gap-4">
      <h3 id="{{ $category | urlize }}" class="text-3xl font-extralight mt-8">{{ $category | title }} Products</h3>
      {{ $products := first 3 (sort (where (where $.Site.RegularPages "Section" "products") "Params.categories" "intersect" (slice $category)) "Date" "desc") }}
      {{/*  Render a list of products  */}}
      {{ if gt (len $products) 0 }}
      {{ partial "content/products/collections/list.html" (dict "list" $products "drillsDown" true "category" $category) }}
      {{ end }}
    </div>
    {{ end }}

    {{/*  Latest Articles  */}}
    {{ $latest := first 2 (where .Site.RegularPages "Section" "articles") }}
    {{ partial "content/articles/collections/list.html" (dict "title" "Latest Articles" "list" $latest) }}
  </footer>
</section>
{{ end }}