{{ define "main" }}
  <div
    class="relative overflow-auto px-4 shadow-md shadow-gray-600 ring-1 ring-gray-800 mt-1"
  >
    <div class="grid font-mono md:grid-cols-12 md:space-x-10">
      <div class="hidden md:block md:col-span-1"></div>
      <div class="md:col-span-11">
        <h1
          class="text-3xl font-medium uppercase md:py-4 md:text-4xl lg:text-5xl"
        >
          {{ .Title }}
        </h1>
      </div>
    </div>

    <div class="inset-x-2 -mx-4 space-y-1">
      <hr class="border-t-2 border-black" />
      <hr class="border-t-2 border-black" />
    </div>
    <div class="md:grid md:grid-cols-12 grid-col-11 md:space-x-10 mb-10">
      <div
        class="hidden font-mono md:block md:col-span-1 mt-6 cursor-default [writing-mode:vertical-rl]"
      >
        <!-- <h2 class="font-light uppercase md:text-2xl">The Secondary header goes here</h2> -->
        <div class=" font-medium space-y-2">
          {{ $dateMachine := .Date | time.Format "2006-01-02T15:04:05-07:00" }}
          {{ $dateHuman := .Date | time.Format ":date_long" }}
          <time
            datetime="{{ $dateMachine }}"
            class="border border-black py-2 px-1 hover:bg-cyan-400"
            >{{ $dateHuman }}
          </time>
          <span class="border border-black py-2 px-1 hover:bg-teal-400"
            >{{ .WordCount }} words
          </span>

          {{ if gt .ReadingTime 1 }}
            {{ .Scratch.Set "timeUnit" "mins" }}
          {{ else }}
            {{ .Scratch.Set "timeUnit" "min" }}
          {{ end }}


          <span class="border border-black py-2 px-1 hover:bg-pink-400"
            >~{{ .ReadingTime }}
            {{ .Scratch.Get "timeUnit" }}
          </span>
        </div>
      </div>

      <div
        class="prose prose-neutral lg:prose-lg md:col-span-11 col-span-12 md:mx-auto"
      >
        <div
          class="invisible absolute inset-y-0 border-l-2 border-dashed border-black md:visible md:-ml-6"
        ></div>

        <img
          class="object-cover w-full h-60 sm:h-96 grayscale hover:grayscale-0"
          src="{{ .Params.Image | absURL }}"
          alt="{{ .Title }}"
        />
        {{ .Content }}

      </div>
    </div>
    <div class="inset-x-0 mb-10 -m-4">
      <hr class="border-b-1 border-black" />
    </div>
  </div>
  <!-- {{ partial "terms.html" (dict "taxonomy" "tags" "page" .) }} -->
  {{ if .Store.Get "hasMermaid" }}
    <script type="module">
      import mermaid from "https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs";
      mermaid.initialize({ startOnLoad: true });
    </script>
  {{ end }}

{{ end }}