{% macro render_header() %}
{% set root = get_section(path="_index.md") %}
<a href="{{ root.permalink | safe }}#top">
  <div class="logo">
    <img src="{{ get_url(path=config.extra.juice_logo_path) }}" alt="logo">
    {{ config.extra.juice_logo_name }}
  </div>
</a>

<nav>
  {% if config.extra.juice_extra_menu %}
  {% for menu in config.extra.juice_extra_menu %}
  <a class="nav-item subtitle-text" href="{{ menu.link | safe }}#top">{{ menu.title }}</a>
  {% endfor %}
  {% endif %}


  {% for page in root.pages %}
  {% if lang == "en" %}
  <a class="nav-item subtitle-text" href="{{ page.permalink | safe }}#top">{{ page.title }}</a>
  {% else %}
  <a class="nav-item subtitle-text" href="/{{lang}}{{ page.path }}#top">{{ page.title }}</a>
  {% endif %}
  {% endfor %}

  {% for path in root.subsections %}
  {% set child = get_section(path=path) %}
  {% if lang == "en"%}
  <a class="nav-item subtitle-text" href="{{ child.permalink | safe }}#top">{{ child.title }}</a>
  {% else %}
  <a class="nav-item subtitle-text" href="/{{lang}}{{ child.path }}#top">{{ child.title }}</a>
  {% endif %}
  {% endfor %}

  {% set hyper="on click halt the event then
  set path to window.location.pathname js(path)
  let arr = path.split('/');
  if (arr[1] == 'sv') {
  arr.shift();
  arr.shift();
  } else if (arr[0] == 'sv') {
  arr.shift();
  } else{
  arr[0] = 'sv';
  }
  if (arr.slice(-1) == '' ) {
  arr.pop();
  }
  arr.unshift(window.location.origin);
  return arr.join('/') end
  log(it)
  then set window.location to it"%}

  {% if lang == "en" %}
  <a class="nav-item subtitle-text" href="/sv"><img alt="swedish" class="flag" src="/flag-for-sweden-svgrepo-com.svg"
      _="{{ hyper }}"></a>
  {% else %}
  <a class="nav-item subtitle-text" href="/en"><img alt="swedish" class="flag"
      src="/flag-for-united-kingdom-svgrepo-com.svg" _="{{ hyper }}"></a>
  {% endif %}


  <div class='toggle-dark'>
    <label>
      <input type='checkbox' _="on click 
            log(the first <body/>) then
      if me.checked
        log('checked')
        add .dark to the closest <body/>
        window.localStorage.setItem('darkmode', 'true')
      else
        remove .dark from the closest <body/>
        window.localStorage.setItem('darkmode', 'false')
      end
      log('darkmode') then log(window.localStorage.getItem('darkmode'))
      end
      on load
      if window.localStorage.getItem('darkmode') == 'true'
        send click to me
        ">
      <span class='slider'></span>
    </label>
  </div>


  <!-- if i am <:checked/> -->
</nav>
{% endmacro render_header %}


{% macro render_toc(toc) %}
<div class="toc">
  <div class="toc-sticky">
    {% for h in toc %}
    <div class="toc-item">
      <a class="subtext" href="{{h.permalink | safe}}">{{ h.title }}</a>
    </div>
    {% if h.children %}
    {% for h2 in h.children %}
    <div class="toc-item-child">
      <a class="subtext" href="{{h2.permalink | safe}}"><small>- {{ h2.title }}</small></a>
    </div>
    {% endfor %}
    {% endif %}
    {% endfor %}
  </div>
</div>
{% endmacro render_toc %}


{% macro hero(slogan, intro)%}
<div class="hero">

  <script async defer src="https://buttons.github.io/buttons.js"></script>
  <section class="text-center">
    <h1 class="heading-text" style="font-size: 50px">
      {{ slogan }}
    </h1>
    <h3 class="title-text">
      {{ intro | safe }}
    </h3>
    <div>
      <!-- <a class="github-button" href="https://github.com/huhu/juice" data-size="large" data-show-count="true" -->
      <!-- aria-label="Star huhu/juice on GitHub">Star</a> -->
      <!-- <a class="github-button" href="https://github.com/huhu/juice/fork" data-size="large" data-show-count="true" -->
      <!-- aria-label="Fork huhu/juice on GitHub">Repos</a> -->
    </div>
  </section>
  <img class="hero-image" style="width: 50%" src="{{ get_url(path='build-blocks.svg') }}">

  <div class="explore-more text" onclick="document.getElementById('features').scrollIntoView({behavior: 'smooth'})">
    Explore More ⇩
  </div>
  <style>
    .hero section {
      padding: 0 5rem;
    }

    @media screen and (max-width: 768px) {
      .hero section {
        padding: 0 2rem;
      }

      .hero-image {
        display: none
      }
    }
  </style>

</div>
{% endmacro hero %}