{% macro render_header(path) %}
{% set root = get_section(path="_index.md") %}
<a href="{{ root.permalink | safe }}">
  <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 }}">{{ menu.title }}</a>
  {% endfor %}
  {% endif %}


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

  {% if lang == "en"%}
  <a class="nav-item subtitle-text" href="/sv{{ path }}"><img alt="swedish" class="flag"
      src="/flag-for-sweden-svgrepo-com.svg"></a>
  {% else %}
  <a class="nav-item subtitle-text" href="{{ path }}"><img alt="english" class="flag"
      src="/flag-for-united-kingdom-svgrepo-com.svg"></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/>
      else
        remove .dark from the closest <body/>
      end
      end
      on load
      if (the first <body/> match .dark)
        log('loaded as dark') then
        set me.checked to true then
        log(me) 
        ">
      <span class='slider'></span>
    </label>
  </div>


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