---
import TableOfContentsList from "./TableOfContents/TableOfContentsList.astro";

const { toc } = Astro.locals.starlightRoute;
---

{
  toc && (
    <starlight-toc
      data-min-h={toc.minHeadingLevel}
      data-max-h={toc.maxHeadingLevel}
    >
      <nav aria-labelledby="starlight__on-this-page">
        <h2 id="starlight__on-this-page" class="uppercase flex gap-2 pl-6 mb-6">
          <svg
            width="12"
            height="12"
            viewBox="0 0 12 12"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M1.375 6H10.625M1.375 2.875H10.625M1.375 9.125H5.75"
              stroke="#A3A3A3"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>

          {Astro.locals.t("tableOfContents.onThisPage")}
        </h2>
        <TableOfContentsList toc={toc.items} />
      </nav>
    </starlight-toc>
  )
}

<script src="./TableOfContents/starlight-toc"></script>

<style>
  @layer starlight.core {
    #starlight__on-this-page {
      font-size: 12px !important;
      display: flex;
      align-items: center;
    }
  }
</style>