<nav class="np-sub-navigation">
  <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>
          {% if link.label == 'Dashboard' %}
            My Dashboard
          {% elsif link.label == 'Catalog' %}
            Courses Library
          {% elsif link.label == 'Events' %}
            Live Training Webinars
          {% else %}
            {{ link.label }}
          {% endif %}
        </a>
        <div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
      </div>
    {% endfor %}
      <div class="np-sub-navigation-content-item-inactive knowledge-base-link">
        <a class="np-sub-navigation-content-item-link" href="https://support.hackerrank.com">
          <i class="fal fa-book-reader np-button-color np-sub-navigation-content-item-icon"></i>
          Knowledge Base
        </a>
        <div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
	  </div>

      <div class="np-sub-navigation-content-item new-products-link">
		<a class="np-sub-navigation-content-item-link"
		   href="https://hackerrank.northpass.com/app/new-product-releases">
          <i class="fal fa-rocket-launch np-sub-navigation-content-item-icon"></i>
          New Product Releases
        </a>
        <div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
	  </div>

      <div class="np-sub-navigation-content-item case-studies-link">

		<a style="text-decoration: none;" href="https://hackerrank.northpass.com/app/case-studies">
		<div class="np-sub-navigation-content-item-link" >
		  <img class="fal np-button-color np-sub-navigation-content-item-icon custom-icon" src="https://s3.amazonaws.com/static.northpass.com/HackerRank/Lightbulb_Book-Icon.jpg">
          Case Studies
		</div>
		</a>
        <div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
	</div>
  </div>
</nav>

<style>
/* .custom-icon {
	content: url('https://s3.amazonaws.com/static.northpass.com/HackerRank/Lightbulb_Book-Icon.jpg');
    height: 100%;
	overflow: auto;
} */
.custom-icon {
	width: 32px;
    position: relative;
    top: 50%;
    left: 50%;
    padding: 0;
    transform: translate(-135%, calc(-50% - 10px));
}
  .np-sub-navigation-content-item-active .np-sub-navigation-content-item-link {
    color:#1ba94c;
  }
</style>
<script>
  if (window.location.pathname == "/app/case-studies") {
    document.querySelector(".case-studies-link").classList.add("np-sub-navigation-content-item-active")
  } else {
    document.querySelector(".case-studies-link").classList.add("np-sub-navigation-content-item-inactive")
  }
  if (window.location.pathname == "/app/new-product-releases") {
    document.querySelector(".new-products-link").classList.add("np-sub-navigation-content-item-active")
  } else {
    document.querySelector(".new-products-link").classList.add("np-sub-navigation-content-item-inactive")
  }
</script>
