{% if basic_3p_user %}
	{% include "basic_group_sub_navigation" %}
{% else %}
<nav class="np-sub-navigation np-hidden-mobile">
  <div class="np-sub-navigation-content">
    {% for link in navigations.sub_navigation %}
      <div class="np-sub-navigation-content-item {{ link.active_class }}">
        <a class="np-sub-navigation-content-item-link" href="{{ link.url }}">
          <i class="{{ link.icon }} np-button-color np-sub-navigation-content-item-icon"></i>
          {{ link.label }}
        </a>
        <div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
      </div>
    {% endfor %}
    <div class="np-sub-navigation-content-item articles-link">
      <a class="np-sub-navigation-content-item-link" href="/app/articles">
        <i class="far fa-file-alt np-button-color np-sub-navigation-content-item-icon"></i>
        Blog
      </a>
      <div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
    </div>
    <div class="np-sub-navigation-content-item certifications-link">
      <a class="np-sub-navigation-content-item-link" href="/app/certifications">
        <i class="far fa-file-certificate np-button-color np-sub-navigation-content-item-icon"></i>
        Certifications
      </a>
      <div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
    </div>
  </div>
</nav>
{% endif %}

<script>
  if (window.location.pathname == "/app/articles") {
    document.querySelector(".articles-link").classList.add("np-sub-navigation-content-item-active")
  } else {
    document.querySelector(".articles-link").classList.add("np-sub-navigation-content-item-inactive")
  }

  if (window.location.pathname == "/app/certifications") {
    document.querySelector(".certifications-link").classList.add("np-sub-navigation-content-item-active")
  } else {
    document.querySelector(".certifications-link").classList.add("np-sub-navigation-content-item-inactive")
  }
</script>

<style>
  .np-sub-navigation-content-item-link,
  .np-sub-navigation-content-item-active .np-sub-navigation-content-item-link {
    color:#333;
  }
</style>