<html lang='{{ it.lang || "en" }}'>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ it.title || it.basename }}</title>

    <meta name="supported-color-schemes" content="light dark">
    <meta
      name="theme-color"
      content="hsl(220, 20%, 100%)"
      media="(prefers-color-scheme: light)"
    >
    <meta
      name="theme-color"
      content="hsl(220, 20%, 10%)"
      media="(prefers-color-scheme: dark)"
    >

    <link rel="stylesheet" href="/styles.css">
    <script type="module" src="/menu.js"></script>
    <script type="module" src="/copy-code-button.js"></script>
    <link rel="canonical" href="{{ url |> url(true) }}">
    {{ it.extra_head?.join("\n") }}
  </head>

  <body>
    <div class="container">
      <div class="toolbar">
        <button
          aria-label="Menu"
          class="menu-button button is-primary"
          type="button"
          id="menu-button"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="32"
            height="32"
            viewBox="0 0 256 256"
          >
            <path
              d="M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128ZM40,72H216a8,8,0,0,0,0-16H40a8,8,0,0,0,0,16ZM216,184H40a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16Z"
            >
            </path>
          </svg>
        </button>
        <div id="search" class="search"></div>
        <script>
          let theme = localStorage.getItem("theme") ||
            (window.matchMedia("(prefers-color-scheme: dark)")
                .matches
              ? "dark"
              : "light");
          document.documentElement.dataset.theme = theme;
          function changeTheme() {
            theme = theme === "dark" ? "light" : "dark";
            localStorage.setItem("theme", theme);
            document.documentElement.dataset.theme = theme;
          }
        </script>
        <button
          aria-label="Toogle to dark/light theme"
          class="button theme"
          onclick="changeTheme()"
        >
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20">
            <path
              fill-rule="evenodd"
              d="M10 0c5.523 0 10 4.477 10 10s-4.477 10-10 10S0 15.523 0 10 4.477 0 10 0Zm9 10a9 9 0 0 1-9 9V1a9 9 0 0 1 9 9Z"
            />
          </svg>
        </button>
      </div>

      {{ include "templates/menu.vto" }}

      {{ if toc?.length }}
        <nav class="toc">
          <h2>On this page</h2>
          <ol>
            {{ for item of toc }}
              <li>
                <a href="#{{ item.slug }}">{{ item.text }}</a>

                {{ if item.children.length }}
                  <ul>
                    {{ for child of item.children }}
                      <li>
                        <a href="#{{ child.slug }}">{{ child.text }}</a>
                      </li>
                    {{ /for }}
                  </ul>
                {{ /if }}
              </li>
            {{ /for }}
          </ol>
        </nav>
      {{ /if }}

      <main class="main">
        {{ include "templates/breadcrumb.vto" }}

        <div
          class="body"
          {{ if it.content && it.pagefind }}data-pagefind-body{{ /if }}
        >
          {{ if !it.title }}
            <h1>{{ it.basename }}</h1>
          {{ /if }}

          {{ if content }}
            {{ content }}
          {{ else }}
            {{ if it.title }}
              <h1>{{ it.title }}</h1>
            {{ /if }}
            <p class="emptyState">The page <code>{{ url }}</code> is empty</p>
          {{ /if }}
        </div>

        {{
          set children = nav.menu(
            url,
            `lang=${lang} hide_menu!=true`,
            "order=asc title=asc-locale basename=asc-locale",
          )?.children
        }}

        {{ if children }}
          <nav class="body-children">
            {{ for child of children }}
              {{ if child.data.url }}
                <a href="{{ child.data.url }}">{{
                  child.data.title || child.data.basename
                }}</a>
              {{ /if }}
            {{ /for }}
          </nav>
        {{ /if }}

        {{ if it.footnotes?.length }}
          <aside role="note" class="footnotes">
            <dl>
              {{ for note of footnotes }}
                <div id="{{ note.id }}" class="footnote">
                  <dt><a href="#{{ note.refId }}">{{ note.label }}</a></dt>
                  <dd>{{ note.content }}</dd>
                </div>
              {{ /for }}
            </dl>
          </aside>
        {{ /if }}
      </main>

      {{ if it.edit != false && it.repo }}
        <footer class="body-footer">
          <time timestamp='{{ date |> date("DATETIME") }}'>Last updated: {{
              date
              |> date("HUMAN_DATETIME")
            }}</time>
          {{ if it.repo }}
            &nbsp;—&nbsp;
            <a
              href="{{ repo.url }}/edit/main{{ repo.path }}{{ page.src.path }}{{ page.src.ext }}"
            >Edit this page</a>
          {{ /if }}
        </footer>
      {{ /if }}

      <nav class="body-nav pagination">
        <ul>
          {{
            set previousPage = nav.previousPage(
              url,
              `lang=${lang} hide_menu!=true`,
              "order=asc title=asc-locale basename=asc-locale",
            )
          }}

          {{ if previousPage }}
            <li class="pagination-prev">
              <a href="{{ previousPage.url }}" rel="prev">
                ← Previous
                <strong>{{
                  previousPage.title ||
                    previousPage.basename
                }}</strong>
              </a>
            </li>
          {{ /if }}

          {{
            set nextPage = nav.nextPage(
              url,
              `lang=${lang} hide_menu!=true`,
              "order=asc title=asc-locale basename=asc-locale",
            )
          }}

          {{ if nextPage }}
            <li class="pagination-next">
              <a href="{{ nextPage.url }}" rel="next">
                Next →
                <strong>{{ nextPage.title || nextPage.basename }}</strong>
              </a>
            </li>
          {{ /if }}
        </ul>

        {{
          set children = nav.menu(
            url,
            `lang=${lang} hide_menu!=true`,
            "order=asc title=asc-locale basename=asc-locale",
          )?.children
        }}
      </nav>
    </div>
  </body>
</html>
