<nav class="np-sub-navigation">
  <div class="np-sub-navigation-content">
    {% for link in navigations.sub_navigation %}
      {% if link.label == "Dashboard" %}
        <div class="np-sub-navigation-content-item {{ link.active_class }}">
          <a class="np-sub-navigation-content-item-link" href="{{ link.url }}">
            New Hire Training
          </a>
          <div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
        </div>
      {% endif %}
    {% endfor %}
    <div class="np-sub-navigation-content-item supplementals-link">
      <a class="np-sub-navigation-content-item-link" href="/app/supplementals">
        Supplementals
      </a>
      <div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
		</div>
		{% for course in courses.enrolled  %}
			{% for category in course.categories %}
				{% if category.name == "Instructor-Led" %}
			<div class="np-sub-navigation-content-item ilt-link">
				<a class="np-sub-navigation-content-item-link" href="/app/instructor-led-training">
					Instructor-Led Training
				</a>
				<div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
			</div>
			{% endif %}
		{% endfor %}
	{% endfor %}
  </div>
</nav>

<style>
  .np-sub-navigation {
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    padding-top: 12px;
  }

  .np-sub-navigation-content-item-link {
    height: auto;
    color: #000;
  }

  .np-sub-navigation-content-item.active > a {
    font-weight: 500;
  }

  .np-sub-navigation-content-item.active .np-sub-navigation-content-item-bar {
    display: block;
  }
</style>

<script>
  if (window.location.pathname == "/app/supplementals") {
    document.querySelector(".supplementals-link").classList.add("active")
  }
  if (window.location.pathname == "/app/instructor-led-training") {
    document.querySelector(".ilt-link").classList.add("active")
  }
</script>
