{# ========================================================================= #}
{# :: Default page #}
{# ========================================================================= #}
{#
  This is used as a default page containing a header, main and a footer.
#}

{# ========================================================================= #}
{# :: Imports #}
{# ========================================================================= #}
{# Organisms #}
{% import "styleguides/general/organisms/menu/menu-macros.njk" as menu %}
{% import "styleguides/general/organisms/header/header-macros.njk" as header %}

{# ========================================================================= #}
{# :: Template #}
{# ========================================================================= #}
<!DOCTYPE html>
<html lang="en">

  {% include "styleguides/general/pages/_base/head.njk" %}

  <body>
    {# Skip link: first focusable item to jump to main content #}
    <a class="a-skip-link" href="#main-content">Ga naar hoofdinhoud</a>
   
   <div class="l-root js-root {{pageParams.bodyClass}} {{'has-no-menu' if not pageParams.hasMenu}}">
      {{menu.default("l-root__menu" if pageParams.hasMenu else "l-root__menu u-tablet-hide", {
        active: pageParams.activeNav
      })}}

      <div class="l-root__view">
        <div class="l-root__header">
          {% block headerDefault %}
          {% endblock %}

          {% block headerMobile %}
          {% endblock %}
        </div>

        <main id="main-content" class="l-root__content {{pageParams.contentClass}}">
          {% block content %}
          {% endblock %}
        </main>
      </div>

      {% block overlays %}
      {% endblock %}
    </div>

    {% include "styleguides/general/pages/_base/foot.njk" %}
  </body>

</html>
