<!DOCTYPE html>
<html lang="de" dir="ltr" class="h-full">
  <head>    
    <link rel="canonical" href="{{ config.url }}{{ page.url }}">
    <link rel="stylesheet" href="/css/output.css" >

    <title>{% if title and title != 'Home' %}{{title}} - {% endif %}{{ config.title }}</title>

    <!-- Icons -->
    <!-- Enable if favicons installed into the static/img/ directory -->
    {# <link rel="shortcut icon" type="image/png" href="/images/x16-favicon.png" sizes="16x16" />
    <link rel="shortcut icon" type="image/png" href="/images/x32-favicon.png" sizes="32x32" />
    <link rel="shortcut icon" type="image/png" href="/images/x64-favicon.png" sizes="64x64" />#}
    <link rel="shortcut icon" type="image/png" href="/favicon.png" />
    <link rel="apple-touch-icon" type="image/png" href="/favicon.png" />
    <script src="/js/jquery.min.js"></script>
    <script src="/js/jquery.mark.min.js"></script>

    <!-- Meta -->
    <meta name="description" content="{% if description %}{{ description }}{% else %}{{ config.description }}{% endif %}">
    <meta name="keywords" content="{% if keywords %}{{ keywords }}{% else %}{{ config.keywords }}{% endif %}">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="Content-Language" content="en">
    <meta name="viewport" content="width=device-width,initial-scale=1">

    <!-- Facebook -->
    <meta property="og:title" content="{% if (title != 'Home') %}{{title}} - {% endif %}{{ config.title }}">
    <meta property="og:type" content="website">
    <meta property="og:description" content="{% if description %}{{ description }}{% else %}{{ config.description }}{% endif %}">
    <meta property="og:url" content="{{ config.url }}{{ page.url }}">
    <meta property="og:image" content="{% if image %}{{ image }}{% else %}{{ config.image }}{% endif %}">

    <!-- Twitter -->
    <meta name="twitter:card" content="{{ card }}">
    <meta name="twitter:site" content="{{ twitter }}">
    <meta name="twitter:title" content="{% if (title != 'Home') %}{{title}} - {% endif %}{{ config.title }}">
    <meta name="twitter:description" content="{% if description %}{{ description }}{% else %}{{ config.description }}{% endif %}">
    <meta name="twitter:creator" content="{{ twitter }}">
    <meta name="twitter:image" content="{{ config.url }}{{ page.url }}">
    <meta name="twitter:domain" content="{% if image %}{{ image }}{% else %}{{ config.image }}{% endif %}">

  </head>
  <body class="w-full h-full">
    <div class="
      px-12
      max-w-screen-2xl
      mx-auto
      flex flex-row">
      <aside class="shrink-0 grow-0 basis-[26rem] sticky top-0  max-h-screen min-h-screen flex flex-col bg-slate-50">
          {% include "sidebar.njk" %}
      </aside>

      <main class="px-8 pt-[7.5rem] min-h-full">
        <div>
          <h2 class="text-3xl font-bold pb-4">
              {{ title | safe }}
          </h2>
          {{ content | safe }}
        </div>
      </main>

      {# <div class="row-start-3 col-span-6 self-end">
      {% include "footer.njk" %}
      </div> #}
    </div>

  <script>
    // Script for showing and acting upon the "scroll to top button"
    const scrollFunction = function () {
        button = document.getElementById("scrollbutton");
        if (button !== null) {
            if (document.body.scrollTop > 400 || document.documentElement.scrollTop > 400) {
                // button.style.display = "block";
                button.style.pointerEvents = "auto";
                button.classList.remove("hidden");
            } else {
                // button.style.display = "none";
                button.style.pointerEvents = "none";
                button.classList.add("hidden");
            }
        }
    }


    // Scripts for filtering lists
    let dictionary = [];
    function createIndex(id){
      $("#" + id + " .searchable").each( (ind, el) => {
        dictionary.push({
          category: $(el).parents(".category"),
          element: el,
          searchitem: $(el).text().toLowerCase()
        });
      });
    }

    function findWord(word, d){
      var sw = word.trim().toLowerCase();
      return d.filter(function(e){
        if (e.searchitem.indexOf(sw) !== -1) {
          return true;
        } else {
          return false;
        };
      })
    }


  $(document).ready(function( $ ) {
    // Scroll button
    if (document.getElementById("scrollbutton") !== null) {
        scrollFunction();
        document.getElementById("scrollbutton").addEventListener("click", () => {
            document.body.scrollTop = 0; // For Safari
            document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
        })
        window.addEventListener("scroll", scrollFunction);
    }

    // List filtering
    if (document.getElementById("list")) {
      createIndex("list");
      let found = dictionary;
      let sw = "";
      let swl = 0;
      $("input[name='keyword']").keyup(function() {
        var term = $(this).val() || '';
        if( term ) {
          $(".hideifsearching").each( (ind, el) => {
            $(el).hide();
          });
          for (let item of found) {
            $(item.element).unmark().hide();
            $(item.category).hide();
          }
          if (term.length > swl && term.startsWith(sw)) {
            found = findWord( term, found );
          } else {
            found = findWord( term, dictionary );
          }
          for (let item of found) {
              $(item.category).addClass("search-expanded").show();
              $(item.element).show();
              if (term.length >= 3) {
                $(item.element).mark(term);
              } 
          }
          sw = term;
          swl = term.length;
        } else {
          $("#list .category").show().removeClass("search-expanded").unmark();
          $("#list .searchable").show();
          found = dictionary;
          sw = "";
          swl = 0;
          $(".hideifsearching").each( (ind, el) => {
            $(el).show();
          });
        }
      });
    }
  });
  </script>
  </body>
</html>
