{{ define "main" }}
<div
  class="prose prose-invert mx-auto prose-lg prose-a:decoration-cyan-500 hover:prose-a:decoration-pink-500 text-white">
  <div class="md:-mx-8 lg:-mx-16 px-8 py-1">
    <h1 class="text-5xl font-bold mb-6 mt-12 text-center">{{ .Title }}</h1>

    {{ .Content }}
  </div>
</div>
<section class="text-gray-100">
  <div class="max-w-6xl p-6 mx-auto space-y-6 sm:space-y-12 mb-16">
    {{ range first 1 .Pages }}
    <div
      class="block max-x-sm gap-3 mx-auto sm:max-w-full group hover:no-underline focus:no-underline lg:grid lg:grid-cols-12 bg-neutral-900">
      <a class="lg:col-span-7" href="{{ .RelPermalink }}">
        <img class="object-cover w-full h-64 rounded sm:h-96 lg:col-span-7" src="{{ .Params.Image | absURL }}"
          alt="{{ .LinkTitle }}">
      </a>
      <div class="p-6 space-y-2 lg:col-span-5">
        <a href="{{ .RelPermalink }}">
          <h3 class="text-2xl font-semibold sm:text-4xl group-hover:underline group-focus:underline">{{ .LinkTitle }}
          </h3>
          {{ $dateMachine := .Date | time.Format "2006-01-02T15:04:05-07:00" }}
          {{ $dateHuman := .Date | time.Format ":date_long" }}
          <time datetime="{{ $dateMachine }}" class="text-gray-400">{{ $dateHuman }}</time>
          {{ if gt .ReadingTime 1 }}
          {{ .Scratch.Set "timeUnit" "mins" }}
          {{ else }}
          {{ .Scratch.Set "timeUnit" "min" }}
          {{ end }}

          {{ if .Site.Params.showReadingTime }}
          <span class="text-gray-400"> | ~{{.ReadingTime}} {{ .Scratch.Get "timeUnit" }}</span>
          {{ end }}
          <p> {{ .Summary | truncate 250 }}</p>
        </a>
          <span class="flex flex-wrap py-6 space-x-2">
            <a class="px-3 py-1 m-1 rounded-sm hover:underline bg-pink-400 text-gray-900 font-bold" href="/posts/category/{{ .Params.Category }}">
              {{ .Params.Category }}</a>
          </span>
      </div>
    </div>
    {{ end }}
    <div class="grid justify-center grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
      {{ range after 1 .Pages }}
      <div class="max-w-sm mx-auto group hover:no-underline focus:no-underline bg-neutral-900">
        <a href="{{ .RelPermalink }}">
          <img class="object-cover w-full h-44 rounded" src="{{ .Params.Image | absURL }}" alt="{{ .LinkTitle }}">
        </a>
        <div class="p-6 space-y-2">
          <a href="{{ .RelPermalink }}">
            <h3 class="text-2xl font-semibold group-hover:underline group-focus:underline">{{ .LinkTitle }}</h3>
            {{ $dateMachine := .Date | time.Format "2006-01-02T15:04:05-07:00" }}
            {{ $dateHuman := .Date | time.Format ":date_long" }}
            <time datetime="{{ $dateMachine }}" class="text-gray-400">{{ $dateHuman }}</time>
            {{ if gt .ReadingTime 1 }}
            {{ .Scratch.Set "timeUnit" "mins" }}
            {{ else }}
            {{ .Scratch.Set "timeUnit" "min" }}
            {{ end }}

            {{ if .Site.Params.showReadingTime }}
            <span class="text-gray-400"> | ~{{.ReadingTime}} {{ .Scratch.Get "timeUnit" }}</span>
            {{ end }}
            <p> {{ .Summary | truncate 150 }}</p>

          </a>
            <span class="flex flex-wrap py-6 space-x-2">
              <a class="px-3 py-1 m-1 rounded-sm hover:underline bg-pink-400 text-gray-900 font-bold" href="/posts/category/{{ .Params.Category }}">
                {{ .Params.Category }}</a>
            </span>
        </div>
      </div>
      {{ end }}
    </div>
  </div>
</section>
{{ end }}