{{ define "main" }}

  <div class="grid gap-6">
    <article class="prose lg:prose-xl">
      <header class="">
        <h1 class="">{{ .Title }}</h1>
        <p class="text-xl text-gray-600">{{ .Date.Format "January 2, 2006" }}</p>
      </header>

      <div class="">
        {{ .Content }}
      </div>

      <footer class="mt-8">
        <p class="text-lg text-gray-600">Tags:
          {{ range .Params.tags }}
            <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">{{ . }}</span>
          {{ end }}
        </p>
      </footer>
    </article>

    <!-- Related Posts -->
    <div class="related-posts mt-12">
      <h2 class="text-3xl font-bold mb-6">Related Posts</h2>
      <div class="grid sm:grid-cols-4 gap-6">
        {{ $related := first 4 (where .Site.RegularPages "Section" "posts") }}
        {{ range $related }}
          {{ partial "card_3.html" (dict "title" .Title "summary" .Summary "link" .RelPermalink "imageUrl" .Params.image "imageAlt" .Params.imageAlt "classList" "sm:col-span-1") }}
        {{ end }}
      </div>
    </div>
  </div>

{{ end }}