{% block navigation %}

{% for group in nav_items %}
<style>

span.navigation_icon {
   display: inline-block;
    line-height: 30px;
    align-items: center;
    vertical-align: middle;
    /*padding: auto;*/
    margin: 0px;
    fill: #fff;
    width: 20px;
    height: 20px;
    /*vertical-align: middle;*/
    /*margin: 0px;*/
    /*padding: 0px;*/
    border: none;
    border-radius: 11px;
}


</style>
<button class="collapsible{% if group.is_active %} active{% endif %}">
  <span class="navigation_icon">
  {% if group.name == 'Assistance' %}
      {% include 'icons/assistance.svg' %}
  {% elif group.name == 'Access' %}
      {% include 'icons/access.svg' %}
  {% elif group.name == 'Config Management' %}
      {% include 'icons/ansible.svg' %}
  {% elif group.name == 'ITAM' %}
      {% include 'icons/itam.svg' %}
  {% elif group.name == 'ITIM' %}
      {% include 'icons/itim.svg' %}
  {% elif group.name == 'Settings' %}
      {% include 'icons/settings.svg' %}
  {% elif group.name == 'Project Management' %}
      {% include 'icons/project.svg' %}
  {% endif %}
  </span>
{{ group.name }}
</button>
<div class="content"{% if group.is_active %} style="max-height:inherit" {% endif %}>
  <ul>
    {% for group_urls in group.urls %}
    <li{% if group_urls.is_active %} class="active"{% endif %} style="padding-left: 40px">
    <span class="navigation_icon">
    {% if group_urls.name == 'Clusters' %}
        {% include 'icons/clusters.svg' %}
    {% elif group_urls.name == 'Devices' %}
        {% include 'icons/devices.svg' %}
    {% elif group_urls.name == 'Knowledge Base' %}
        {% include 'icons/information.svg' %}
    {% elif group_urls.name == 'Services' %}
        {% include 'icons/service.svg' %}
    {% elif group_urls.name == 'Software' %}
        {% include 'icons/software.svg' %}
    {% elif group_urls.name == 'Groups' %}
        {% include 'icons/config_management.svg' %}
    {% endif %}
    </span>
    <a href="{{ group_urls.url }}">{{ group_urls.name }}</a>
    </li>
    {% endfor %}
  </ul>
</div>
{% endfor %}
<script>
  var coll = document.getElementsByClassName("collapsible");
  var i;

  for (i = 0; i < coll.length; i++) {
    coll[i].addEventListener("click", function () {
      this.classList.toggle("active");
      var content = this.nextElementSibling;
      if (content.style.maxHeight) {
        content.style.maxHeight = null;
      } else {
        content.style.maxHeight = content.scrollHeight + "px";
      }
    });
  }
</script>
{% endblock %}
