{% load horizon i18n %}

<ul id="sidebar-accordion" class="nav nav-pills nav-stacked">
  {% 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"
           data-target="#sidebar-accordion-{{ dashboard.slug }}"
           href="javascript:;"
           {% 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.iteritems %}
            {% 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 }}"
                       data-target="#sidebar-accordion-{{ dashboard.slug }}-{{ group.slug }}"
                       href="javascript:;"
                       {% 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>
