<nav style="background: transparent;" class="np-sub-navigation custom-navigation">
  <div class="np-sub-navigation-content custom-navigation-content">
    {% for link in navigations.sub_navigation %}
      {% if link.label == "Events" or link.label == "Dashboard"  %}
      {% elsif link.label == "Catalog" %}
        <div class="np-sub-navigation-content-item {{ link.active_class }} custom-navigation-content-item">
          <a class="np-sub-navigation-content-item-link custom-navigation-item-link" href="{{ link.url }}">
            <i
              class="{{ link.icon }} np-button-color np-sub-navigation-content-item-icon custom-navigation-content-item-icon"></i>
            <span style="margin-left: 10px; color: #000000;">Courses</span>
          </a>
        </div>
      {% elsif link.label == "Home" %}
        <div class="np-sub-navigation-content-item {{ link.active_class }} custom-navigation-content-item">
          <a class="np-sub-navigation-content-item-link custom-navigation-item-link" href="{{ link.url }}">
            <i
              class="{{ link.icon }} np-button-color np-sub-navigation-content-item-icon custom-navigation-content-item-icon"></i>
            <span style="margin-left: 10px; color: #000000;">Dashboard</span>
          </a>
        </div>
      {% else %}
        <div class="np-sub-navigation-content-item {{ link.active_class }} custom-navigation-content-item">
          <a class="np-sub-navigation-content-item-link custom-navigation-item-link" href="{{ link.url }}">
            <i
              class="{{ link.icon }} np-button-color np-sub-navigation-content-item-icon custom-navigation-content-item-icon"></i>
            <span style="margin-left: 10px; color: #000000;">{{ link.label }}</span>
          </a>
        </div>
      {% endif %}
    {% endfor %}
    {% if current_person.signed_in? %}
      <div class="np-sub-navigation-content-item np-sub-navigation-content-item-inactive custom-navigation-content-item" id="certification-sub-nav-item">
        <a class="np-sub-navigation-content-item-link custom-navigation-item-link" href="/app/certification">
          <i
            class="far fa-diploma np-button-color np-sub-navigation-content-item-icon custom-navigation-content-item-icon"></i>
          <span style="margin-left: 10px; color: #000000;">Certification</span>
        </a>
      </div>
    {% endif %}
  </div>
</nav>

<script>
    if(window.location.href.indexOf('/app/certification') > -1){
      document.querySelector('#certification-sub-nav-item').classList.remove('np-sub-navigation-content-item-inactive');
      document.querySelector('#certification-sub-nav-item').classList.add('np-sub-navigation-content-item-active');
    } else {
      document.querySelector('#certification-sub-nav-item').classList.remove('np-sub-navigation-content-item-active');
      document.querySelector('#certification-sub-nav-item').classList.add('np-sub-navigation-content-item-inactive');
    }
</script>