<!DOCTYPE html>
<html lang="en">
<head>
   {% if site.analytics %}
   <!-- Google tag (gtag.js) -->
   <script async src="https://www.googletagmanager.com/gtag/js?id={{ site.analytics }}"></script>
   <script>
   window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', '{{ site.analytics }}');
   </script>
   {% endif %}

   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="/index.css">
   <link rel="stylesheet" href="https://rsms.me/inter/inter.css">
   <link rel="icon" type="image/png" href="{{ '/img/Icon.png' | version | url }}">
   <meta name="darkreader-lock">

   {% set currentpagetitle = content | pagetitle | safe %}
   {% set currentpagedescription = content | pagedescription | safe %}
   <title>{{ currentpagetitle }}</title>
   <meta name="description" content="{{ currentpagedescription }}">

   <meta name="twitter:title" content="{{ currentpagetitle }}">
   <meta name="twitter:description" content="{{ currentpagedescription }}">

   <meta property="og:title" content="{{ currentpagetitle }}">
   <meta property="og:description" content="{{ currentpagedescription }}">
</head>
<body class="bg-stone-100 dark:bg-stone-900">
   <!-- Hamberger Menu Spacer -->
   <div class="sticky top-0 z-10 w-full h-16 bg-stone-100 dark:bg-stone-900 md:hidden print:hidden"></div>
   <div class="flex">
      <!-- Sidebar -->
      {% include "sidebar.njk" %}
      <div class="flex flex-row-reverse flex-1 mx-auto max-w-7xl">
         <!-- Table of Content -->
         <div class="sticky top-0 hidden w-64 h-screen pt-20 overflow-y-hidden bg-stone-100 lg:flex lg:flex-col dark:bg-stone-900">
            {% set tableofcontent = content | toc %}
            {% if tableofcontent | length %}
            {% macro sidetoc(link) %}
            <li class="ml-4">
               <a
                  class="block py-2 text-stone-500 dark:text-stone-400 hover:text-stone-900 dark:hover:text-stone-100"
                  href="{{ link.href }}"
               >
                  {{ link.title }}
               </a>
               {% if link.children %}
               <ol>
               {% for link in link.children %}
               {{ sidetoc(link) }}
               {% endfor %}
               </ol>
               {% endif %}
            </li>
            {% endmacro %}
            <h5 class="mb-3 text-sm font-semibold tracking-wide text-stone-900 uppercase lg:text-xs dark:text-stone-100">On this page</h5>
            <div class="overflow-x-hidden overflow-y-auto text-sm font-medium break-words">
               <nav>
                  <ol>
                     {% for link in tableofcontent %}
                     <li>
                        <a
                           class="block py-2 text-stone-500 dark:text-stone-400 hover:text-stone-900 dark:hover:text-stone-100"
                           href="{{ link.href }}"
                        >
                           {{ link.title }}
                        </a>
                        {% if link.children %}
                        <ol>
                        {% for link in link.children %}
                        {{ sidetoc(link) }}
                        {% endfor %}
                        </ol>
                        {% endif %}
                     </li>
                     {% endfor %}
                  </ol>
               </nav>
            </div>
            {% endif %}
         </div>
         <!-- Article -->
         <div class="flex justify-center flex-1">
            <main class="grow px-4 py-0 prose prose-stone break-anywhere sm:px-6 md:px-8 md:py-12 dark:prose-invert lg:prose-lg xl:prose-xl focus:outline-none print:px-0 prose-code:before:content-none prose-code:after:content-none print:max-w-none print:!py-0 print:prose-sm" tabindex="0">
               {{ content | safe }}

               {% if not skipEdit %}
               <sub class="flex justify-end pb-8 print:hidden md:pb-0">
                  <a class="edit-link" href="{{ page.inputPath | edit }}">Edit this page on GitHub</a>
               </sub>
               {% endif %}
            </main>
         </div>
      </div>
   </div>
</body>
</html>
