{{!--
This header template is shared across all the pages.
--}}

<header class="m-header {{#if background}}with-picture{{/if}} js-header">
  <div class="m-mobile-topbar" data-aos="fade-down">
    <button class="m-icon-button in-mobile-topbar js-open-menu" aria-label="{{t "Open menu"}}">
      <span class="icon-menu" aria-hidden="true"></span>
    </button>
    {{#if @site.logo}}
      <a href="{{@site.url}}" class="m-logo in-mobile-topbar">
        <img src="{{@site.logo}}" alt="{{@site.title}}">
      </a>
    {{else}}
      <a href="{{@site.url}}" class="m-site-name in-mobile-topbar">
        {{@site.title}}
      </a>
    {{/if}}
    <button class="m-icon-button in-mobile-topbar js-open-search" aria-label="{{t "Open search"}}">
      <span class="icon-search" aria-hidden="true"></span>
    </button>
  </div>

  <div class="m-menu js-menu">
    <button class="m-icon-button outlined as-close-menu js-close-menu" aria-label="{{t "Close menu"}}">
      <span class="icon-close"></span>
    </button>
    <div class="m-menu__main" data-aos="fade-down">
      <div class="l-wrapper">
        <div class="m-nav js-main-nav">
          <nav class="m-nav__left js-main-nav-left" role="navigation" aria-label="{{t "Main menu"}}">
            <ul>
              {{#if @site.logo}}
                <li class="only-desktop">
                  <a href="{{@site.url}}" class="m-logo">
                    <img src="{{@site.logo}}" alt="{{@site.title}}">
                  </a>
                </li>
                {{else}}
                <li class="only-desktop">
                  <a href="{{@site.url}}" class="m-site-name in-desktop-menu">
                    {{@site.title}}
                  </a>
                </li>
              {{/if}}
              {{#if @site.navigation}}
                {{navigation}}
              {{/if}}
              {{#if @site.secondary_navigation}}
                <li class="more">
                  <span>
                    <a href="javascript:void(0);" class="js-open-secondary-menu">
                      {{t "More"}}
                      <span class="icon-chevron-down" aria-hidden="true"></span>
                    </a>
                  </span>
                </li>
              {{/if}}
              <li class="submenu-option js-submenu-option">
                <button class="m-icon-button in-menu-main more js-toggle-submenu" aria-label="{{t "Open submenu"}}">
                  <span class="icon-more" aria-hidden="true"></span>
                </button>
                <div class="m-submenu js-submenu">
                  <div class="l-wrapper in-submenu">
                    <section class="m-recent-articles">
                      <h3 class="m-submenu-title in-recent-articles">{{t "Recent articles"}}</h3>
                      {{#get "posts" limit="4" order="published_at desc" as |recent|}}
                        {{#if recent}}
                          <div class="glide js-recent-slider">
                            <div class="glide__track" data-glide-el="track">
                              <div class="glide__slides">
                                {{#foreach recent}}
                                <div class="glide__slide">
                                  <a href="{{url}}" class="m-recent-article">
                                    <div class="m-recent-article__picture {{#unless feature_image}}no-picture{{/unless}}">
                                      {{#if feature_image}}
                                        <img src="{{img_url feature_image size="s"}}" loading="lazy" alt="">
                                      {{else}}
                                        <img src="{{asset "images/no-image.png"}}" loading="lazy" alt="">
                                      {{/if}}
                                    </div>
                                    <h3 class="m-recent-article__title js-recent-article-title" title="{{title}}">
                                      {{title}}
                                    </h3>
                                    <span class="m-recent-article__date">{{date published_at timeago="true"}}</span>
                                  </a>
                                </div>
                                {{/foreach}}
                              </div>
                            </div>
                          </div>
                        {{else}}
                          <div class="m-not-found in-recent-articles">{{t "No recent articles found :("}}</div>
                        {{/if}}
                      {{/get}}
                    </section>
                    <section class="m-tags">
                      <h3 class="m-submenu-title">{{t "Tags"}}</h3>
                      {{#get "tags" limit="10"}}
                        <ul>
                          {{#foreach tags}}
                            <li>
                              <a href="{{url}}">{{name}}</a>
                            </li>
                            {{else}}
                              <li class="m-not-found">{{t "No tags found :("}}</li>
                          {{/foreach}}
                        </ul>
                      {{/get}}
                    </section>
                  </div>
                </div>
              </li>
            </ul>
          </nav>
          <div class="m-nav__right">
            <button class="m-icon-button in-menu-main js-open-search" aria-label="{{t "Open search"}}">
              <span class="icon-search" aria-hidden="true"></span>
            </button>
            <div class="m-toggle-darkmode js-tooltip" data-tippy-content="{{t "Toggle dark mode"}}" tabindex="0">
              <label for="toggle-darkmode" class="sr-only">
                {{t "Toggle dark mode"}}
              </label>
              <input id="toggle-darkmode" type="checkbox" class="js-toggle-darkmode">
              <div>
                <span class="icon-moon moon" aria-hidden="true"></span>
                <span class="icon-sunny sun" aria-hidden="true"></span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  {{#if @site.secondary_navigation}}
    <div id="secondary-navigation-template" style="display: none;">
      {{navigation type="secondary"}}
    </div>
  {{/if}}
</header>