{% load horizon i18n %}

<div class="sidebar-wrapper">
  <ul id="sidebar-drawer" class="nav nav-pills nav-stacked">
    {% for dashboard, panel_info in components %}
      {% if user|has_permissions:dashboard %}
        <li class="openstack-dashboard{% if current.slug == dashboard.slug %} active{% endif %}">
          <a data-toggle="collapse"
             data-parent="#sidebar-drawer"
             data-target="#sidebar-drawer-{{ 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-drawer-{{ 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">
                      <a data-toggle="collapse"
                         data-parent="#sidebar-drawer-{{ dashboard.slug }}"
                         data-target="#sidebar-drawer-{{ 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-drawer-{{ 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="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>
</div>
