<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta
    name="viewport"
    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
  >
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.7.0/build/styles/vs2015.min.css"
  >
  <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.7.0/build/highlight.min.js"></script>
  <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.7.0/build/languages/http.min.js"></script>
  <script src="https://cdn.tailwindcss.com"></script>
  <style>
    @import url("https://use.fontawesome.com/releases/v5.13.0/css/all.css");
  </style>
  <title>{{ title }}</title>
</head>
<body class="bg-[{{ surfaceColor }}] text-white overflow-x-hidden">
  <div class="w-screen min-h-screen h-full flex">
    <header class="w-full h-14 xl:h-12 rounded-b-xl xl:rounded-none fixed left-0 z-50 top-0 px-5 xl:pl-44 xl:pr-80 flex justify-between items-center transition-all">
      <i class="fas fa-bars text-xl block xl:hidden" id="sandwich"></i>
      <div class="text-2xl">{{ title }}</div>
      <div class="flex gap-2">
        {% for link in nav.links %}
          <a href="{{ link.url }}" class="flex items-center gap-2 select-none hover:text-[{{ accentColor }}] transition-all duration-300" alt="{{ link.title }}"> 
            {% if link.title %}
              <p> {{ link.title }} </p>
            {% endif %}
            <i class="{{ link.icon }}"></i>
          </a>
        {% endfor %}
      </div>
    </header>
    <!-- SideBar (desktop) -->
    <div class="hidden xl:block xl:fixed left-0 top-12 flex flex-col w-3/12 z-40 bg-[{{ surfaceColor }}] min-h-screen h-full">
      <div class="ml-36 pt-2 mr-2 border-t-[1px] border-white border-opacity-10 border-t-[1px]" id="line"></div>
      <div class="flex flex-col gap-2 pl-32 h-full">
        {% macro sidebar(key, item) %}
          <!-- SideBar item -->
          <div class="flex flex-col gap-2 border-white border-opacity-10 mt-2">
            <div class="flex pl-2 flex-col w-full font-bold">
              {% if item._items %}
                <div class="flex w-full gap-2 cursor-pointer" onclick="toggleList('{{ item._data.id }}')">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    height="24"
                    width="24"
                    class="fill-white opacity-70 transition-all ease-out select-none"
                    id="{{ item._data.id }}-icon"
                    style="transform: rotate(90deg);"
                  >
                    <path d="M9.4 17.65 8.35 16.6l4.6-4.6-4.6-4.6L9.4 6.35 15.05 12Z"/>
                  </svg>
                  <p class="select-none">
                    {{ item._data.title }}
                  </p>
                </div>
                <div class="flex flex-col h-fit w-full" id="{{ item._data.id }}-list" style="display: flex">
                  {% for k, i in item._items.items() %}
                    {% if not i._data.url %}
                      {{- sidebar(key, i) -}}
                    {% else %}
                      <a
                        href="{{ i._data.url }}"
                        id="{{ i._data.url }}href"
                        class="select-none pl-8 opacity-50 hover:opacity-100 transition-all duration-300">
                        {{ i._data.title }}
                      </a>
                    {% endif %}
                  {% endfor %}
                </div>
              {% else %}
                <a
                  href="{{ item._data.url }}"
                  id="{{ item._data.url }}href"
                  class="select-none pl-8 w-full opacity-50 hover:opacity-100 transition-all duration-300">
                  {{ item._data.title }}
                </a>
              {% endif %}
            </div>
          </div>
        {% endmacro %}
        <div class="px-2">
          {% for key, item in side.items() %}
            {{ sidebar(key, item) }}
          {% endfor %}
        </div>
      </div>
    </div>

    <!-- Sidebar (mobile) -->
    <div class="fixed top-12 left-0 z-40 w-full h-full flex flex-col gap-2 text-2xl bg-[{{ surfaceColor }}] transition-all" id="sideBarPhone">
      {% macro sidebar_mobile(key, item) %}
        <!-- SideBar item -->
        <div class="flex flex-col gap-2 border-white border-opacity-10 mt-2">
          <div class="flex pl-2 flex-col w-full font-bold">
            {% if item._items %}
              <div class="flex w-full gap-2 cursor-pointer" onclick="toggleList('{{ item._data.id }}')">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  height="24"
                  width="24"
                  class="fill-white opacity-70 transition-all ease-out select-none"
                  id="{{ item._data.id }}-icon-mobile"
                  style="transform: rotate(90deg);"
                >
                  <path d="M9.4 17.65 8.35 16.6l4.6-4.6-4.6-4.6L9.4 6.35 15.05 12Z"/>
                </svg>
                <p class="select-none">
                  {{ item._data.title }}
                </p>
              </div>
              <div class="flex flex-col h-fit w-full" id="{{ item._data.id }}-list-mobile" style="display: flex">
                {% for k, i in item._items.items() %}
                  {% if not i._data.url %}
                    {{- sidebar(key, i) -}}
                  {% else %}
                    <a
                      href="{{ i._data.url }}"
                      id="{{ i._data.url }}hrefMobile"
                      class="select-none pl-8 opacity-50 hover:opacity-100 transition-all duration-300">
                      {{ i._data.title }}
                    </a>
                  {% endif %}
                {% endfor %}
              </div>
            {% else %}
              <a
                href="{{ item._data.url }}"
                id="{{ item._data.url }}hrefMobile"
                class="select-none pl-8 w-full opacity-50 hover:opacity-100 transition-all duration-300">
                {{ item._data.title }}
              </a>
            {% endif %}
          </div>
        </div>
      {% endmacro %}
      <div class="px-2">
        {% for key, item in side.items() %}
          {{ sidebar_mobile(key, item) }}
        {% endfor %}
      </div>
    </div>

    <div class="h-full w-3/12 hidden xl:block"></div>

    <!-- Content -->
    <main class="w-full xl:w-9/12 xl:pr-64 py-4 bg-[{{ backgroundColor }}] relative">
      <div class="w-full h-full pt-20 flex px-5 xl:px-32 gap-20">
        <!-- Page data -->
        <div class="flex flex-col gap-4 w-full xl:w-3/4">
          {{ pageData|safe }}
        </div>
        <!-- Page navigation (desktop) -->
        <div class="hidden xl:flex flex-col fixed right-0 w-1/4 h-fit text-sm pt-2">
          <p class="select-none pl-5 font-black py-2 border-l-[1px] border-white border-opacity-20">
            On this page
          </p>
          {% for i in titleRefs %}
          <a id="page{{ i.id }}" href="#{{ i.id }}"
            class="select-none border-l-[1px] py-0.5 font-semibold pl-[{{ i.level / 2.0 + 0.5 }}em] opacity-50 hover:opacity-100 border-opacity-100 pl-5 cursor-pointer transition-all duration-200">
            {{ i.title|safe }}
          </a>
          {% endfor %}
        </div>
      </div>
    </main>
  </div>

  <style>
    @import url(https://cdn.jsdelivr.net/npm/firacode@6.2.0/distr/fira_code.css);

    @supports (font-variation-settings: normal) {
      code { font-family: 'Fira Code VF', monospace; }
    }

    :root {
      font-family: "Inter var", "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
      font-variant-ligatures: contextual;
    }
    :root::-webkit-scrollbar {
      background: #ffffff3a;
      width: .75rem;
      height: .75rem;
    }
    :root::-webkit-scrollbar-thumb {
      background: #ffffff5a;
      border-radius: 2rem;
    }

    ::-moz-selection {
      background: {{ accentColor }}90;
    }
    ::selection {
      background: {{ accentColor }}90;
    }
    .titleLink {
      height: 100%;
      float: left;
      display: flex;
      flex-direction: column;
      justify-content: center;
      font-size: 1.5rem;
      margin-right: .25rem;
      user-select: none;
    }
    .quote {
      background: #ffffff2a;
      border-radius: 0 .5rem .5rem 0;
      border-left: .25rem solid {{ accentColor }};
      padding: .5rem 1.25rem;
      display: flex;
      flex-direction: column;
    }
    .command {
      background: #ffffff2a;
      border-radius: .25rem;
      padding: .25rem .5rem;
      width: fit-content;
      font-family: 'Fira Code', monospace;
      display: inline;
    }
    hr {
      background: {{ accentColor }};
      color: {{ accentColor }};
      border: 0;
      height: .1rem;
    }
    h1 {
      letter-spacing: .2rem;
      font-weight: bolder;
      font-size: 4rem;
    }
    h2 {
      letter-spacing: .15rem;
      font-weight: bold;
      font-size: 3rem;
    }
    h3 {
      letter-spacing: .1rem;
      font-weight: bold;
      font-size: 2rem;
    }
    h4 {
      letter-spacing: .05rem;
      font-weight: bold;
      font-size: 1rem;
    }
    h5, h6 {
      font-weight: bold;
      font-size: .5rem;
    }
    code {
      border-radius: 0 0 .5rem .5rem;
      padding: .25rem .5rem;
      font-family: 'Fira Code', monospace;
      width: 100%;
    }
    code::-webkit-scrollbar {
      background: #00000000;
      width: .75rem;
      height: .75rem;
      border-radius: 2rem;
    }
    code::-webkit-scrollbar-thumb {
      background: #ffffff5a;
      border-radius: 2rem;
    }
    pre {
      background: #00000090;
      border-radius: .5rem;
      display: flex;
      flex-direction: column;
      justify-content: end;
      justify-items: end;
      place-items: end;
    }
    button {
      width: fit-content;
      padding: .25rem .5rem;
      display: flex;
      justify-items: center;
      transition: opacity .15s ease-out;
    }
    button:hover {
      opacity: .75;
    }
    button:active {
      opacity: .6;
    }
    ul {
      display: flex;
      flex-direction: column;
      gap: .5rem;
    }
  </style>

  <script>
    // Get elements
    const titleRefs = document.getElementsByClassName("titleRef");
    const header = document.getElementsByTagName('header')[0];
    const sidebar = document.getElementById('sideBarPhone');
    const sandwich = document.getElementById('sandwich');
    const titleRefsArray = [...titleRefs];

    // Prepare titles
    function newLink(id) {
      let result = document.createElement('a');
      result.href = `#${id}`;
      result.className = "titleLink";
      result.innerHTML = `<i class="fas fa-link"></i>`;
      result.style.visibility = 'hidden';
      return result;
    }

    titleRefsArray.forEach((e) => {
      let link = newLink(e.id);
      e.appendChild(link);
      e.addEventListener('mouseover', () => {
        console.log(link);
        link.style.visibility = 'visible';
      })
      e.addEventListener('mouseout', () => {
        console.log(link);
        link.style.visibility = 'hidden';
      })
    });

    function toggleList(itemID) {
      const listElem = document.getElementById(`${itemID}-list`);
      const iconElem = document.getElementById(`${itemID}-icon`);
      const listElemMobile = document.getElementById(`${itemID}-list-mobile`);
      const iconElemMobile = document.getElementById(`${itemID}-icon-mobile`);

      // toggle
      listElem.style.display === 'flex' ? (() => {
        listElem.style.display = 'none';
        iconElem.style.transform = 'rotate(0deg)';
        listElemMobile.style.display = 'none';
        iconElemMobile.style.transform = 'rotate(0deg)';
      })() : (() => {
        listElem.style.display = 'flex';
        iconElem.style.transform = 'rotate(90deg)';
        listElemMobile.style.display = 'flex';
        iconElemMobile.style.transform = 'rotate(90deg)';
      })();
    }

    // Mobile
    let showSidebar = true;
    function sideBarSwitcher() {
      showSidebar = !showSidebar;
      sidebar.style.transform = showSidebar ? '' : `translateX(-${screen.width}px)`;
    }

    function checkScroll(ypos) {
      let selected = false;

      header.classList.toggle('bg-[{{ surfaceColor }}]', ypos > 200);

      for (let i = 0; i < titleRefsArray.length; ++i) {
        const e = titleRefsArray[i];
        const { id } = e;
        const { top } = e.getBoundingClientRect();
        const pageEl = document.getElementById("page" + id);
        const pos = window.scrollY + top;

        const isSelected = !selected && (ypos <= pos || i == titleRefsArray.length-1);
        selected = selected || isSelected;
        
        pageEl.classList.toggle('border-[{{ accentColor }}]', isSelected);
        pageEl.classList.toggle('opacity-90', isSelected);
        pageEl.classList.toggle('opacity-60', !isSelected);
      }
    }

    {% if selected %}
      const href = document.getElementById("{{ selected }}href");
      const hrefMobile = document.getElementById("{{ selected }}hrefMobile");
      href.className += " opacity-90 text-[{{ accentColor }}]";
      hrefMobile.className += " opacity-90 text-[{{ accentColor }}]";
    {% endif %}

    window.addEventListener("scroll", ev => {
      checkScroll(window.scrollY);
    });

    window.addEventListener("load", ev => {checkScroll(window.scrollY)});

    sandwich.addEventListener('click', sideBarSwitcher);
    sideBarSwitcher();

    hljs.highlightAll();
  </script>
</body>
</html>