{# SPDX-License-Identifier: EUPL-1.2 #}

<!-- Masthead-->
<header role="banner" id="header" class="site-header">

    <!-- Navigation-->
    <div class="navbar sticky shadow inside flex lg:pl-36">

      <!-- Masthead Logo-->
      {% if pages["_meta"].meta.logo %}
          <div class="site-logo flex align-items-center py-24 mx-36">
              <a href="{{ "index"|link }}">
                  <img height="50" width="200" src="{{ pages["_meta"].meta.logo|url }}" alt="" />
              </a>
          </div>
      {% endif %}

      <!-- Nav bar-->
      <nav role="navigation" class="menu flex" aria-label="{{ index.header.Browsing_menu }}">
        <button type="button" class="burger-button float-right" aria-expanded="false" aria-label="Afficher ou masquer la navigation" aria-controls="main-navigation" >
        <span class="open">Menu</span>
        <span class="close none">Close</span>
        </button>
        <ul id="main-navigation" class="nav-menu flex flex-wrap text-bold">
          {% for page in pages(depthOffset=-1) %}
            {% if page.title and not page.hidden %}
              <li class="nav-item">
                  <a href="{{ page.url }}" {% if page.id == current_page.id %} class="selected"{% endif %}>{{ page.title }}</a>
              </li>
            {% endif %}
          {% endfor %}
        </ul>

        <!-- Github Repo-->
        <div class="holder-panel tablet-hidden">
        {% if pages["_meta"].meta.icon0 %}
          <div class="holder-contact bg-glaz text-bold"><a class="btn" href="">{{ pages["_meta"].meta.icon0_txt }}</a><i class="icon icon-{{ pages["_meta"].meta.icon0 }} color-white"></i></div>
        {% endif %}
        </div>
      </nav>
    </div>
</header>