{{ define "main" }}
  <section>
    <div class="max-w-6xl mx-auto space-y-4 sm:space-y-5 dark:text-white">
      {{ range first 1 .Pages }}

        {{- $color := (index (shuffle (slice "cyan" "teal" "pink" "rose" "fuchsia" "purple" "violet" "indigo" "emerald" "yellow" "amber" "red")) 0) }}
        {{- $classes := (printf "flex items-center justify-center border border-black text-center group-hover:text-black group-hover:bg-%s-400 text-white bg-black capitalize group-hover:font-bold dark:bg-white dark:text-black" $color ) }}
        <div
          class="block max-x-sm gap-4 mx-auto sm:max-w-full group hover:no-underline focus:no-underline lg:grid lg:grid-cols-12 ring-1 ring-black dark:ring-white"
        >
          <a class="lg:col-span-7" href="{{ .RelPermalink }}">
            <img
              class="object-cover w-full h-64 sm:h-96 lg:col-span-7 grayscale group-hover:grayscale-0"
              src="{{ .Params.Image | absURL }}"
              alt="{{ .LinkTitle }}"
            />
          </a>
          <div class="p-4 space-y-2 lg:col-span-5 ">
            <a href="{{ .RelPermalink }}">
              <h3 class="text-2xl font-medium sm:text-3xl space-y-2 ">
                {{ .LinkTitle }}
              </h3>
              <div class="inset-x-0 py-2">
                <hr
                  class="border-t-2 border-black border-dashed dark:border-white"
                />
                <!-- <hr class="border-t-1 border-black" /> -->
              </div>
              {{ $dateMachine := .Date | time.Format "2006-01-02T15:04:05-07:00" }}
              {{ $dateHuman := .Date | time.Format ":date_medium" }}
              <time
                datetime="{{ $dateMachine }}"
                class="border border-black py-1 px-2 group-hover:bg-cyan-400 font-sm dark:border-white dark:group-hover:text-black dark:group-hover:border-black"
                >{{ $dateHuman }}</time
              >
              {{ if gt .ReadingTime 1 }}
                {{ .Scratch.Set "timeUnit" "mins" }}
              {{ else }}
                {{ .Scratch.Set "timeUnit" "min" }}
              {{ end }}


              <span
                class="border border-black py-1 px-2 group-hover:bg-pink-400 font-sm dark:border-white dark:group-hover:text-black dark:group-hover:border-black"
                >~{{ .ReadingTime }}
                {{ .Scratch.Get "timeUnit" }}
              </span>
              <p class="break-all mt-2 ">
                {{ .Summary | truncate 200 }}
              </p>
            </a>

            <!-- <span class=""> -->
            <a
              class="{{ $classes }}"
              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 }}
          {{- $color := (index (shuffle (slice "cyan" "teal" "pink" "rose" "fuchsia" "purple" "violet" "indigo" "emerald" "yellow" "amber" "red")) 0) }}
          {{- $classes := (printf "flex items-center justify-center border border-black text-center group-hover:text-black group-hover:bg-%s-400 text-white bg-black capitalize group-hover:font-bold dark:bg-white dark:text-black" $color ) }}
          <div
            class="max-w-sm mx-auto group hover:no-underline focus:no-underline ring-1 ring-black dark:ring-white"
          >
            <a href="{{ .RelPermalink }}">
              <img
                class="object-cover w-full h-44 grayscale group-hover:grayscale-0"
                src="{{ .Params.Image | absURL }}"
                alt="{{ .LinkTitle }}"
              />
            </a>
            <div class="p-4 space-y-2">
              <a href="{{ .RelPermalink }}">
                <h3 class="text-2xl font-medium ">
                  {{ .LinkTitle }}
                </h3>
                <div class="inset-x-0 py-2">
                  <hr
                    class="border-t-1 border-dashed border-black dark:border-white"
                  />
                </div>
                {{ $dateMachine := .Date | time.Format "2006-01-02T15:04:05-07:00" }}
                {{ $dateHuman := .Date | time.Format ":date_medium" }}
                <time
                  datetime="{{ $dateMachine }}"
                  class="border border-black py-1 px-2 group-hover:bg-cyan-400 font-sm dark:border-white dark:group-hover:text-black dark:group-hover:border-black"
                  >{{ $dateHuman }}</time
                >
                {{ if gt .ReadingTime 1 }}
                  {{ .Scratch.Set "timeUnit" "mins" }}
                {{ else }}
                  {{ .Scratch.Set "timeUnit" "min" }}
                {{ end }}


                <span
                  class="border border-black py-1 px-2 group-hover:bg-pink-400 font-sm dark:border-white dark:group-hover:text-black dark:group-hover:border-black"
                  >~{{ .ReadingTime }} {{ .Scratch.Get "timeUnit" }}</span
                >
                <p class="break-all mt-2 ">
                  {{ .Summary | truncate 147 }}
                </p>
              </a>
              <!-- <span class="flex colums-auto flex-col justify-between"> -->
              <a
                class="{{ $classes }}"
                href="/posts/category/{{ .Params.Category }}"
              >
                {{ .Params.Category }}</a
              >
              <!-- </span> -->
            </div>
          </div>
        {{ end }}
      </div>
    </div>
  </section>
{{ end }}