<!-- :class="{'not-complete' : $store.state.headerComplete === false}" -->
<div
  id="header"
  class="header"
>
  <div class="header-container container mx-auto">
    <a
      href="/"
      class="link">
      <div class="header-title-container">
        <div class="header-logo">
          {{ $image := resources.Get "images/logo.png" }}
          <img
            src="{{ $image.RelPermalink }}"
            class="logo">
        </div>
        <div class="header-title">
	    <div class="header-title-title">{{ .Site.Title }}</div>
	    <div class="header-sub-title">{{ .Site.Params.slogan }}</div>
        </div>
      </div>
    </a>
    <div class="header-nav-responsive-button-container">
      <label for=drawer-toggler
        class="header-nav-responsive-button"
      >
        <i class="fa fas fa-bars"></i>
      </label>
    </div>
    <div class="header-nav">
	{{ $current := . }}
	{{ range .Site.Menus.main.ByWeight }}
{{ $active := "" }}
{{ $menu_item_url := .URL | relLangURL }}
{{ $page_url:= $current.RelPermalink | relLangURL }}

{{ if eq $menu_item_url $page_url }}
{{ $active = "active" }}
{{ end }}
{{ if (and (hasPrefix $page_url $menu_item_url)  (not (eq $menu_item_url "/"))) }}
{{ $active = "active" }}
{{ end }}
      <div class="header-nav-item">
        <a
		href="{{ .URL }}"
		class="link{{ if .Params.customClass }} {{ .Params.customClass }}{{ end }} {{ $active }}">
	    {{ $title := .Title }}
	    {{ with (index site.Params .Identifier) }}
	    {{ if isset . "title" }}
	    {{ $title = .Title }}
	    {{ else }}
	    {{ $title = . }}
	    {{ end }}
	    {{ end }}
	    {{ $title }}
	    </a>
      </div>
      {{ end }}
    </div>
    <div class="header-locale-container">
	{{ partial "locales-list.html" }}
    </div>
  </div>
</div>
