{% load horizon i18n %}
{% load sidebar_state_cookie_name from tnx_theme %}
{% load sidebar_state from tnx_theme %}

{% sidebar_state_cookie_name as COOKIE_NAME %}
{% sidebar_state as IS_SIDEBAR_OPEN %}

<a href="#" data-toggle="collapse" class="collapse-block"
   data-target="#sidebar-accordion" aria-expanded="{{ IS_SIDEBAR_OPEN }}">
  <div class="d-flex w-100 justify-content-start align-items-center">
    <span id="collapse-icon" class="fa fa-2x mr-3 fa-angle-double-left"></span>
  </div>
</a>
<ul id="sidebar-accordion"
    class="nav nav-pills nav-stacked collapse{% if IS_SIDEBAR_OPEN %} in{% endif %}"
     data-cookie-name="{{ COOKIE_NAME }}">
  {% for dashboard, panel_info in components %}
    {% if user|has_permissions:dashboard %}
      <li class="panel openstack-dashboard{% if current.slug == dashboard.slug %} active{% endif %}">
        <a data-toggle="collapse"
           data-parent="#sidebar-accordion"
           href="#sidebar-accordion-{{ dashboard.slug }}"
           {% if current.slug != dashboard.slug %}
             class="collapsed"
           {% endif %}>
          {{ dashboard.name }}
          <span class="openstack-toggle pull-right fa"></span>
        </a>
        <ul id="sidebar-accordion-{{ dashboard.slug }}"
            class="nav collapse panel-collapse{% if current.slug == dashboard.slug %} in{% endif %}">
          {% for group, panels in panel_info.items %}
            {% with panels|has_permissions_on_list:user as filtered_panels %}
              {% if filtered_panels %}
                {% if group.name %}
                  <li class="nav-header panel">
                    <a data-toggle="collapse"
                       data-parent="#sidebar-accordion-{{ dashboard.slug }}"
                       href="#sidebar-accordion-{{ dashboard.slug }}-{{ group.slug }}"
                       {% if current.slug == dashboard.slug and current_panel_group != group.slug %}class="collapsed"
                       {% elif current.slug != dashboard.slug and forloop.counter0 != 0 %}class="collapsed"{% endif %}>
                      <span class="nav-header-title">
                        {{ group.name }}
                        <span class="openstack-toggle fa pull-right"></span>
                      </span>
                    </a>
                    <ul id="sidebar-accordion-{{ dashboard.slug }}-{{ group.slug }}"
                        class="nav collapse panel-collapse
                        {% if current.slug == dashboard.slug and current_panel_group == group.slug %} in
                        {% elif current.slug != dashboard.slug and forloop.counter0 == 0 %} in{% endif %}">
                {% endif %}
                {% for panel in filtered_panels %}
                  <li class="panel openstack-panel{% if current.slug == dashboard.slug and current_panel == panel.slug %} active{% endif %}">
                    <a class="openstack-spin" href="{{ panel.get_absolute_url }}"
                       target="_self"
                       tabindex="{{ forloop.counter }}" >
                      {{ panel.name }}
                    </a>
                  </li>
                {% endfor %}
                {% if group.name %}
                    </ul>
                  </li>
                {% endif %}
              {% endif %}
            {% endwith %}
          {% endfor %}
        </ul>
      </li>
    {% endif %}
  {% endfor %}
</ul>