{{ with .Fragments.Headings }}
  <div
    x-data="toc"
    class="sticky top-[8rem] h-screen overflow-y-auto overflow-x-hidden">
    <h2
      class="text-base font-semibold tracking-tight text-gray-600  dark:text-gray-400">
      On this page
    </h2>
    <nav class="w-56 mt-2">
      <ul>
        {{ template "render-toc-level" (dict "h" . "p" $) }}
      </ul>
    </nav>
  </div>
{{ end }}

{{ define "render-toc-level" }}
  {{ range .h }}
    {{ if and .ID (and (ge .Level 2) (le .Level 4)) }}
      {{ $.p.Store.Set "hasToc" true }}
      <li>
        <a
          href="#{{ .ID }}"
          x-ref="{{ .ID }}"
          @click.stop="setActive('{{ .ID }}')"
          class="block pb-1 text-blue-600 hover:text-blue-500 dark:text-blue-500 dark:hover:text-blue-400{{ if gt .Level 2 }}
            ml-2 lg:ml-3 text-sm
          {{ else }}
            text-sm
          {{ end }}"
          :class="{'font-bold dark:text-blue-200 dark:hover:text-blue-300' : activeHeading === '{{ .ID }}'}">
          {{ .Title | safeHTML }}
        </a>
      </li>
    {{ end }}
    {{ with .Headings }}
      <ul>
        {{ template "render-toc-level"  (dict "h" . "p" $.p) }}
      </ul>
    {{ end }}
  {{ end }}
{{ end }}