<nav class="np-sub-navigation">
  <div class="np-sub-navigation-content">
    {% for link in navigations.sub_navigation %}
      {% if link.label != 'Dashboard' and link.label != "Learning Paths"%}
        <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>
            {% if link.label == 'Home' %}
              My Learning
              {%else%}
              {{ link.label }}
            {% endif %}
          </a>
          <div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
        </div>
      {% endif %}
    {% endfor %}
    <div id='communication' class="np-sub-navigation-content-item np-sub-navigation-content-item-inactive">
      <a class="np-sub-navigation-content-item-link" href="/app/communication">
        <i class="far fa-address-card np-button-color np-sub-navigation-content-item-icon"></i>
         Communication
      </a>
      <div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
    </div>
    <div id='resources' class="np-sub-navigation-content-item np-sub-navigation-content-item-inactive">
      <a class="np-sub-navigation-content-item-link" href="/app/resources">
        <i class="far fa-book-open np-button-color np-sub-navigation-content-item-icon"></i>
         Resources
      </a>
      <div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
    </div>
    <div id='explore' class="np-sub-navigation-content-item np-sub-navigation-content-item-inactive">
      <a class="np-sub-navigation-content-item-link" href="/app/explore">
        <i class="far fa-search np-button-color np-sub-navigation-content-item-icon"></i>
         Explore
      </a>
      <div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
    </div>
  </div>
</nav>


<script>
  document.addEventListener('DOMContentLoaded', () => {
    const catalog = document.getElementById('catalog');
    const communication = document.getElementById('communication');
    const explore = document.getElementById('explore');
    const resources = document.getElementById('resources');
    
    if (window.location.href.split('/')[4] === "catalog") {
      catalog.classList.add('np-sub-navigation-content-item-active');
      catalog.classList.remove('np-sub-navigation-content-item-inactive');
    } else if (window.location.href.split('/')[4] === "communication") {
      communication.classList.add('np-sub-navigation-content-item-active');
      communication.classList.remove('np-sub-navigation-content-item-inactive');
    }
    else if (window.location.href.split('/')[4] === "explore") {
      explore.classList.add('np-sub-navigation-content-item-active');
      explore.classList.remove('np-sub-navigation-content-item-inactive');
    }
    else if (window.location.href.split('/')[4] === "resources" || window.location.href.split('/')[4] === "edulastic" || window.location.href.split('/')[4] === "goguardian" || window.location.href.split('/')[4] === "pear-deck") {
      resources.classList.add('np-sub-navigation-content-item-active');
      resources.classList.remove('np-sub-navigation-content-item-inactive');
    }
    else {
    catalog.classList.remove('np-sub-navigation-content-item-active"');
    communication.classList.remove('np-sub-navigation-content-item-active');

    }


});
</script>