{% assign lang = page.lang %}
{% assign dataToShow = site.data.header[lang].data %}
{% assign file = page.fileName %}
{% assign folder = page.folderName %}
{% assign Data= site.data[folder][lang][file] %}

{%- if page.layout == 'home-1' or page.layout == "feature-1" -%}
<header data-layout="{{page.layout}}" id="header" class="home1-nav-header">
  <nav class="header-navbar navbar navbar-expand-lg">
    <div class="container px-0">
      {% if dataToShow.navbarBrandText != "" %}
      <a id="home-link" class="navbar-brand" href="/"
        title="{{dataToShow.navbarBrandText}}">{{dataToShow.navbarBrandText}}</a>
      {% else %}
      <a id="home-link" href="/">
        <img class="header-logo-height" src="{{ dataToShow.navbarBrandLogo }}" alt="{{ dataToShow.navbarBrandLogo }}"
          {%- if site.crossorigin -%} crossorigin {%- endif -%}>
      </a>
      {% endif %}
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
        aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <div class="header_bars"></div>
        <div class="header_bars"></div>
        <div class="header_bars"></div>
      </button>

      <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
        {%- if Data.megaMenu -%}
        <div class="nav-item header_nav__item">
          <a class="dropdown-toggle ml-lg-5" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
            aria-haspopup="true" aria-expanded="false">
            {{Data.megaMenu.nav-link-name}}
          </a>
          <div class="dropmenu dropdown-menu" style="border-bottom: 0; box-shadow: 0 8px 5px -6px rgb(0 0 0 / 9%);"
            aria-labelledby="navbarDropdown">
            <div class="inner-dropdown">
              {%- for item in Data.megaMenu.dropdown -%}
              <div class="catPad mb-4">
                <li class="tools_list_categoryName">{{item.categoryName}}</li>
                {%- for item in item.links -%}
                <li>
                  <a class="tools_list_featureName" href="{{item.url}}">
                    {%- if item.iconSrc -%}
                    <img class="d-inline mr-2" loading="lazy" style="height:20px;width:20px;" src="{{item.iconSrc}}" {%-
                      if site.crossorigin -%} crossorigin {%- endif -%}>
                    {%- endif -%}
                    {{item.name}}
                  </a>
                </li>
                {%- endfor -%}
              </div>
              {%- endfor -%}
            </div>
          </div>
        </div>
        {%- else -%}
        {%- if dataToShow.megaMenu -%}
        <div class="nav-item header_nav__item">
          <a class="dropdown-toggle ml-lg-5" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
            aria-haspopup="true" aria-expanded="false">
            {{dataToShow.megaMenu.nav-link-name}}
          </a>
          <div class="dropmenu dropdown-menu" aria-labelledby="navbarDropdown">
            <div class="inner-dropdown">
              {%- for item in dataToShow.megaMenu.dropdown -%}
              <div class="catPad mb-4">
                <li class="tools_list_categoryName">{{item.categoryName}}</li>
                <div> {%- for item in item.links -%}
                  <li>
                    <a class="tools_list_featureName" href="{{item.url}}">
                      {%- if item.iconSrc -%}
                      <img class="d-inline mr-2" loading="lazy" style="height:20px;width:20px;" src="{{item.iconSrc}}"
                        {%- if site.crossorigin -%} crossorigin {%- endif -%}>
                      {%- endif -%}
                      {{item.name}}</a>
                  </li>
                  {%- endfor -%}
                </div>
              </div>
              {%- endfor -%}
            </div>
          </div>
        </div>
        {%- endif -%}
        {%- endif -%}


        <div class="navbar-nav">
          {% for item in dataToShow.navItems %}
          <li class="nav-item header_nav__item">
            <a href="{{item.url}}">{{item.name}}</a>
          </li>
          {% endfor %}
        </div>
      </div>
    </div>
  </nav>
</header>
{%- else -%}

<header id="header">
  <nav class="navbar navbar-expand-lg py-3 px-sm-2">
    {% if dataToShow.navbarBrandText != "" %}
    <a id="home-link" class="navbar-brand" href="/"
      title="{{dataToShow.navbarBrandText}}">{{dataToShow.navbarBrandText}}</a>
    {% else %}
    <a id="home-link" href="/">
      <img class="logo-height" src="{{ dataToShow.navbarBrandLogo }}" alt="{{ dataToShow.navbarBrandLogo }}" {%- if
        site.crossorigin -%} crossorigin {%- endif -%}>
    </a>
    {% endif %}
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
      aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <i class="fa fa-bars fa_bars" aria-hidden="true"></i>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      {%- if Data.megaMenu -%}
      <div class="nav-item nav__item">
        <a class="dropdown-toggle ml-lg-5" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
          aria-haspopup="true" aria-expanded="false">
          {{Data.megaMenu.nav-link-name}}
        </a>
        <div class="dropmenu dropdown-menu" aria-labelledby="navbarDropdown">
          <div class="inner-dropdown">
            {%- for item in Data.megaMenu.dropdown -%}
            <div class="catPad mb-4">
              <li class="text-muted">{{item.categoryName}}</li>
              {%- for item in item.links -%}
              <li>
                <a href="{{item.url}}">
                  {%- if item.iconSrc -%}
                  <img class="d-inline mr-2" loading="lazy" style="height:20px;width:20px;" src="{{item.iconSrc}}" {%-
                    if site.crossorigin -%} crossorigin {%- endif -%}>
                  {%- endif -%}
                  {{item.name}}
                </a>
              </li>
              {%- endfor -%}
            </div>
            {%- endfor -%}
          </div>
          </d>
        </div>
      </div>
      {%- else -%}
      {%- if dataToShow.megaMenu -%}
      <div class="nav-item nav__item">
        <a class="dropdown-toggle ml-lg-5" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
          aria-haspopup="true" aria-expanded="false">
          {{dataToShow.megaMenu.nav-link-name}}
        </a>
        <div class="dropmenu dropdown-menu" aria-labelledby="navbarDropdown">
          <div class="inner-dropdown">
            {%- for item in dataToShow.megaMenu.dropdown -%}
            <div class="catPad mb-4">
              <li class="text-muted">{{item.categoryName}}</li>
              {%- for item in item.links -%}
              <li>
                <a href="{{item.url}}">
                  {%- if item.iconSrc -%}
                  <img class="d-inline mr-2" loading="lazy" style="height:20px;width:20px;" src="{{item.iconSrc}}" {%-
                    if site.crossorigin -%} crossorigin {%- endif -%}>
                  {%- endif -%}
                  {{item.name}}</a>
              </li>
              {%- endfor -%}
            </div>
            {%- endfor -%}
          </div>
        </div>
      </div>
      {%- endif -%}
      {%- endif -%}
      <div class="navbar-nav">
        {% for item in dataToShow.navItems %}
        <li class="nav-item nav__item mr-auto">
          <a href="{{item.url}}">{{item.name}}</a>
        </li>
        {% endfor %}
        </d>
      </div>
    </div>
  </nav>
</header>

{% endif %}