{{/* Table of contents for the generated tool catalog page.

     hextra's toc.html builds the right-side TOC from .Fragments.Headings,
     which Hugo only populates from Markdown headings parsed by Goldmark.
     The catalog's <h2> group headings are emitted as raw HTML by
     partials/tool-catalog.html, so they never reach .Fragments and the
     stock TOC renders empty. This rebuilds the TOC from the same
     data/tool_groups.yaml the catalog iterates, listing only groups that
     actually have tools (matching tool-catalog.html's `with $rows` guard). */}}
{{- $onThisPage := (T "onThisPage") | default "On this page" -}}
{{- $editThisPage := (T "editThisPage") | default "Edit this page" -}}
{{- $backToTop := (T "backToTop") | default "Scroll to top" -}}
{{- $tools := site.Data.tools -}}
{{- $groups := slice -}}
{{- range $g := site.Data.tool_groups -}}
  {{- if where $tools "group" $g.key -}}
    {{- $groups = $groups | append $g -}}
  {{- end -}}
{{- end -}}

<nav class="hextra-toc hx-order-last hx-hidden hx-w-64 hx-shrink-0 xl:hx-block print:hx-hidden hx-px-4" aria-label="table of contents">
  <div class="hextra-scrollbar hx-sticky hx-top-16 hx-overflow-y-auto hx-pr-4 hx-pt-6 hx-text-sm [hyphens:auto] hx-max-h-[calc(100vh-var(--navbar-height)-env(safe-area-inset-bottom))] ltr:hx--mr-4 rtl:hx--ml-4">
    {{- with $groups -}}
      <p class="hx-mb-4 hx-font-semibold hx-tracking-tight">{{ $onThisPage }}</p>
      <ul>
        {{- range . }}
          <li class="hx-my-2 hx-scroll-my-6 hx-scroll-py-6">
            <a class="hx-font-semibold hx-inline-block hx-text-gray-500 hover:hx-text-gray-900 dark:hx-text-gray-400 dark:hover:hx-text-gray-300 contrast-more:hx-text-gray-900 contrast-more:hx-underline contrast-more:dark:hx-text-gray-50 hx-w-full hx-break-words" href="#tool-group-{{ .key }}">
              {{- .label -}}
            </a>
          </li>
        {{- end }}
      </ul>
    {{- end -}}

    {{/* TOC bottom part */}}
    <div class="hx-mt-8 hx-border-t hx-bg-white hx-pt-8 hx-shadow-[0_-12px_16px_white] dark:hx-bg-dark dark:hx-shadow-[0_-12px_16px_#111] hx-sticky hx-bottom-0 hx-flex hx-flex-col hx-items-start hx-gap-2 hx-pb-8 dark:hx-border-neutral-800 contrast-more:hx-border-t contrast-more:hx-border-neutral-400 contrast-more:hx-shadow-none contrast-more:dark:hx-border-neutral-400">
      {{- if site.Params.editURL.enable -}}
        {{- $editURL := site.Params.editURL.base | default "" -}}
        {{- with .Params.editURL -}}
          {{- $editURL = . -}}
        {{- else -}}
          {{- with .File -}}
            {{- $sourceDir := replace (strings.TrimPrefix .FileInfo.Meta.BaseDir .FileInfo.Meta.SourceRoot) "\\" "/" -}}
            {{- $sourceDir = strings.TrimPrefix "/content" $sourceDir -}}
            {{- $path := replace .Path "\\" "/" -}}
            {{- $editURL = urls.JoinPath $editURL $sourceDir $path -}}
          {{- end -}}
        {{- end -}}
        <a class="hx-text-xs hx-font-medium hx-text-gray-500 hover:hx-text-gray-900 dark:hx-text-gray-400 dark:hover:hx-text-gray-100 contrast-more:hx-text-gray-800 contrast-more:dark:hx-text-gray-50" href="{{ $editURL }}" target="_blank" rel="noreferrer">{{ $editThisPage }}</a>
      {{- end -}}
      {{/* Scroll To Top */}}
      <button aria-hidden="true" id="backToTop" onClick="scrollUp();" class="hx-transition-all hx-duration-75 hx-opacity-0 hx-text-xs hx-font-medium hx-text-gray-500 hover:hx-text-gray-900 dark:hx-text-gray-400 dark:hover:hx-text-gray-100 contrast-more:hx-text-gray-800 contrast-more:dark:hx-text-gray-50">
        <span>{{- $backToTop -}}</span>
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="hx-inline ltr:hx-ml-1 rtl:hx-mr-1 hx-h-3.5 hx-w-3.5 hx-border hx-rounded-full hx-border-gray-500 hover:hx-border-gray-900 dark:hx-border-gray-400 dark:hover:hx-border-gray-100 contrast-more:hx-border-gray-800 contrast-more:dark:hx-border-gray-50">
          <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5" />
        </svg>
      </button>
    </div>
  </div>
</nav>