{% extends "admin/base_site.html" %}
{% load i18n admin_static %}

{% block title %}
  {% trans "Dc View" %}
{% endblock %}

{% block body_extra_attrs %} ng-app="serverRoomVisualizationApp"{% endblock %}

{% block extrahead %}
  {{ block.super }}
  <link rel="stylesheet" type="text/css" href="{% static 'vendor/css/loading-bar.min.css' %}" />
{% endblock %}

{% block extra_scripts %}
  {{ block.super }}
  {% include 'dc_view/angular_scripts.html' %}
{% endblock %}

{% block breadcrumbs %}
  <span ncy-breadcrumb></span>
{% endblock %}

{% block content %}
<br />
<div id="content-main" class="row">
    <div class="large-12 columns">
        <div class="row visualization">
            <div class="large-2 small-3 columns">
              <div class="panel">
                <h5>{% trans "Server rooms" %}</h5>
                <ul class="side-nav">
                    {% for data_center in data_centers %}
                      <li ui-sref-active="active">
                        {{ data_center }}
                        {% for server_room in data_center.server_rooms.all %}
                          <ul>
                            <li>
                              <a ui-sref="server_room.detail({srId:{{ server_room.id }}})">
                               {{ server_room.name }}
                              </a>
                            </li>
                          </ul>
                          {% endfor%}

                      </li>
                    {% endfor %}
                </ul>
              </div>
              <div class="panel" ui-view="rack-list">
              </div>
            </div>
            <div ui-view class="large-10 small-9 columns">
            </div>
        </div>
    </div>
</div>
{% endblock %}