{% assign logo_path = site.main_logo %}
{%- if layout.header.style -%}
  {%- assign hdrStyle = layout.header.style -%}
{%- else -%}
  {%- assign hdrStyle = "style-1" -%}
{%- endif -%}
<header class="{{hdrStyle}}">
  <nav class="navbar navbar-expand-lg navbar-light">
    <div class="container-fluid">
      <a class="navbar-brand" href="/">{{ site.name }}</a>
      <div class="mobile-link d-md-none">
      {%- if site.header.links -%}
        {%- for link in site.header.links -%}
          {%- if link.label -%}
            <a class="btn btn-primary btn-icon" target="_blank" href="{{ link.url | default: '#' }}"><i class="{{ link.icon | default: 'fas fa-link' }} ml-2" aria-hidden="true"></i></a>
          {%- endif -%}
        {%- endfor -%}
      {%- endif -%}
      <a class="mobile-nav-handle d-md-none" href="javascript:header.toggle();"><i id="nav-handle-icon" class="fas fa-bars"></i></a>
      </div>
      <ul id="navigation" class="nav nav-mobile ml-auto">
        {%- for link in site.data.navigation.main -%}
          {%- if link.url contains '://' -%}
            {%- assign url = link.url -%}
          {%- else -%}
            {%- assign url = link.url | relative_url -%}
          {%- endif -%}
          <!-- {{ page.url }} -->
          <li class="nav-item" data-toggle="nav-popover" data-placement="bottom" data-trigger="manual" data-pop="submenu{{ forloop.index }}">
            <a class="nav-link {% if page.url==url %}active{% endif %}" href="{% if link.url %}{{ url }}{% else %}#{% endif %}">{{ link.title }}</a>
            {%- if link.sub -%}
            <div id="submenu{{ forloop.index }}" class="d-md-none">
              {%- for sublink in link.sub -%}
              <p class="mb-0 px-2 py-1 subnav-item"><a href="{{sublink.url}}">{{sublink.title}}</a></p>  
              {%- endfor -%}
            </div>
            {%- endif -%}
          </li>
        {%- endfor -%}
        <!-- show collection navigation -->
        {% for collection in site.collections %}
          {% if collection.navigation %}
            <li class="nav-item">
              <a class="nav-link {% if page.url==url %}active{% endif %}" href="/{{ collection.relative_directory | remove_first: '_' }}">{{ collection.label | capitalize }}</a>
            </li>
            <!-- create categories array-->
            {% assign categories_col = "" | split:"|" %}
            <!--Add each unique 'my_collection' category to the array-->
            {% for post in collection.docs %}
              {% for category in post.categories %}
                {% assign categories_col = categories_col | push: category | uniq %}
              {% endfor %}
            {% endfor %}
            <!-- show category navigation -->
            {% for cat in categories_col %}
              <li class="nav-item">
                <a class="nav-link {% if page.url==url %}active{% endif %}" href="/{{ collection.relative_directory | remove_first: '_' }}/{{ cat }}">{{ cat | capitalize }}</a>
              </li>
            {% endfor %}
          {% endif %}
        {% endfor %}
      </ul>
      {%- if site.header.links -%}
        {%- for link in site.header.links -%}
          {%- if link.label -%}
            <div class="mt-md-0 mt-3 nav-item d-none d-md-block">
              <a class="btn btn-primary btn-follow" target="_blank" href="{{ link.url | default: '#' }}"><span>{{link.label}}</span><i class="{{ link.icon | default: 'fas fa-link' }} ml-2" aria-hidden="true"></i></a>
            </div>
          {%- endif -%}
        {%- endfor -%}
      {%- endif -%}
    </div>
  </nav>
</header>