{% load i18n sizeformat %}
{% load url from future %}
{% load chart_helpers %}

<div class="status row-fluid detail">
  <div class="span4">
    <h4>{% trans "About" %}</h4>
    <hr class="header_rule">
    <dl>
      <dt>{% trans "Racks" %}</dt>
      <dd><a href="?tab=resource_class_details__racks" >{{ resource_class.list_racks|length }} {% trans "racks" %}</a></dd>
      <dt>{% trans "Nodes" %}</dt>
      <dd>{{ resource_class.nodes|length }} {% trans "nodes" %}</dd>
    </dl>
  </div>

  <div class="span4">
    <h4>{% trans "Provided Service" %}</h4>
    <hr class="header_rule">
    <dl>
      <dt>{% trans "Type" %}</dt>
      <dd>{{ resource_class.service_type }}</dd>
      <dt>{% trans "Flavors" %}</dt>
      <dd><a href="?tab=resource_class_details__flavors" >{{ resource_class.list_flavors|length }} {% trans "flavors" %}</a></dd>
      <dd></dd>
      <dt>{% trans "Active Instances" %}</dt>
      <dd>{{ resource_class.running_virtual_machines|length }} {% trans "instances" %}</dd>
    </dl>
    </dl>
  </div>

  <div class="span4">
    <h4>{% trans "Capacities" %}</h4>
    <hr class="header_rule">
    {% if resource_class.capacities %}
    <table class="capacities">
      {% for capacity in resource_class.capacities %}
      <tr>
        {% if resource_class.has_provisioned_rack %}
        <td class="capacity_label">{{ capacity.name }}:</td>
        <td>
          <div id="{{ capacity.name }}_capacity_usage"
               class="capacity_bar"
               data-chart-type="capacity_bar_chart"
               data-capacity-limit="{{ capacity.value }}"
               data-capacity-used="{{ capacity.usage }}"
               data-average-capacity-used="{{ capacity.average }}">
          </div>
        </td>
        <td>
          <a href="#" data-chart-type="modal_line_chart" data-url="/infrastructure/resource_management/racks/usage_data" data-series="{{ capacity.name }}">{{ capacity.usage|default:_(" - ") }}/{{ capacity.value|default:_(" - ") }} {{ capacity.unit }}</a>
        </td>
        {% else %}
        <td>
          <div id="{{ capacity.name }}_capacity_usage"
               class="capacity_bar"
               data-chart-type="capacity_bar_chart">
          </div>
        </td>
        <td></td>
        {% endif %}
      </tr>
      {% endfor %}
    </table>
    {% else %}
      <p>No data available yet.</p>
    {% endif %}
  </div>
</div>

<div class="status row-fluid detail">
  <div class="span6">
    <h4>{% trans "Capacity Usage" %}</h4>
    <hr class="header_rule">
    {% if resource_class.has_provisioned_rack %}
    <div data-chart-type="line_chart" data-url="/infrastructure/resource_management/racks/usage_data" data-series="cpu,ram,storage,network"></div>
    {% else %}
    <p>{% trans "No data available yet." %}</p>
    {% endif %}
  </div>

  <div class="span6 alerts">
    <h4>{% trans "Active Alerts" %}</h4>
    <hr class="header_rule">
    {% if resource_class.has_provisioned_rack %}
    <ul>
     {% for rack in resource_class.aggregated_alerts %}
         <li>
           <i class="icon-warning-sign"></i>
           Rack <a href="{% url 'horizon:infrastructure:resource_management:racks:detail' rack.id %}">{{ rack.name }}</a> has some problems
         </li>
     {% endfor %}
    </ul>
    {% else %}
    <p>{% trans "No data available yet." %}</p>
    {% endif %}
  </div>
</div>

<div class="row-fluid detail">
  <div class="span6">
    <h4>{% trans "Summary of Instances and Usage" %}</h4>
    <hr class="header_rule">
    {% if resource_class.has_provisioned_rack %}
    <!--
    <dl>
      {% for flavor in resource_class.running_virtual_machines %}
        <dt>{{ flavor.name }}</dt>
        <dd>{{ flavor.max_vms|default:_(" - ") }}</dd>
      {% endfor %}
    </dl>
    -->

    <div class="clear"></div>
      <div>
        <strong>{{ resource_class.total_instances }}</strong> instances
        <strong>{{resource_class.remaining_capacity}}%</strong>  capacity remaining
      </div>
      <div class="flavor_usage_bar"
           data-popup-free='{{resource_class|remaining_capacity_by_flavors}}'
           data-single-bar-orientation="horizontal"
           data-single-bar-height="35"
           data-single-bar-width="100%"
           data-single-bar-used="{{ resource_class|all_used_instances }}"
           data-single-bar-auto-scale-selector=".flavors_scale_selector"
           data-single-bar-color-scale-range='["#000060", "#99FFFF"]'
           >
      </div>

    <table class="flavor_usages">
      <tr>
        {% for flavor in resource_class.list_flavors %}
          <td class="flavor_usage_label">
            {{ flavor.name }}
          </td>
        {% endfor %}
      </tr>
      <tr>
        {% for flavor in resource_class.list_flavors %}
          <td>
            <div
                 class="flavor_usage_bar flavors_scale_selector"
                 data-popup-average='
                 <p>Average capacity consumed by instances of {{flavor.name}} flavor in {{resource_class.name}} class.</p>
                 <p>{{ flavor.used_instances }}%, <strong>{{ flavor.used_instances }} instances</strong></p>
                 '
                 data-single-bar-orientation="vertical"
                 data-single-bar-height="100%"
                 data-single-bar-width="30"
                 data-single-bar-used="{{ flavor.used_instances }}"
                 data-single-bar-average-used="{{ 50 }}"
                 data-single-bar-auto-scale-selector=".flavors_scale_selector"
                 data-single-bar-color-scale-range='["#000060", "#99FFFF"]'
                 >
            </div>
          </td>
        {% endfor %}
      </tr>
      <tr>
        {% for flavor in resource_class.list_flavors %}
          <td class="modal_chart flavor_usage_text"><a href="{{ "#" }}">{{ flavor.used_instances }}%</a></td>
        {% endfor %}
      </tr>
      <tr>
        {% for flavor in resource_class.list_flavors %}
          <td class="flavor_usage_text">{{ flavor.used_instances }} inst.</td>
        {% endfor %}
      </tr>
    </table>
    {% else %}
    <p>{% trans "No data available yet." %}</p>
    {% endif %}
  </div>

  <div class="span6">
    <!-- FIXME Will be added later
    <div class="circles_chart_time_picker">
      <select data-circles-chart-command="change_time"
              data-receiver=".rack_health_chart">
        <option value="now">Now</option>
        <option value="yesterday">Yesterday</option>
        <option value="last_week">Last Week</option>
        <option value="last_month">Last Month</option>
      </select>
    </div>
    -->

    <h4>Rack health</h4>

    {% if resource_class.has_provisioned_rack %}
    <ul class="nav nav-tabs"
        data-circles-chart-command="change_url"
        data-receiver=".rack_health_chart">
      <li class="active">
        <a data-url="{% url 'horizon:infrastructure:resource_management:resource_classes:rack_health' resource_class.id %}?type=overall_health" href="#">
          Overall Health</a>
      </li>
      <li>
        <a data-url="{% url 'horizon:infrastructure:resource_management:resource_classes:rack_health' resource_class.id %}?type=alerts" href="#">
          Alerts</a>
      </li>
      <li>
        <a data-url="{% url 'horizon:infrastructure:resource_management:resource_classes:rack_health' resource_class.id %}?type=capacities" href="#">
          Capacities</a>
      </li>
      <li>
        <a data-url="{% url 'horizon:infrastructure:resource_management:resource_classes:rack_health' resource_class.id %}?type=status" href="#">
          Status</a>
      </li>
    </ul>
    <!--<h5>Region 1<h5>
    <div class="rack_health_chart"
         data-chart-type="circles_chart"
         data-url="/infrastructure/racks/1/top_communicating.json?region=1"
         data-region=1 //// implement region parameter
         data-time="now"
         data-size="10">
    </div>
    <h5>Region 2<h5>
    <div class="rack_health_chart"
         data-chart-type="circles_chart"
         data-url="/infrastructure/racks/1/top_communicating.json?region=2"
         data-region=1 //// implement region parameter
         data-time="now"
         data-size="10">
    </div>
    <h5>Region 3<h5>-->
    <div class="rack_health_chart"
         data-chart-type="circles_chart"
         data-url="{% url 'horizon:infrastructure:resource_management:resource_classes:rack_health' resource_class.id %}"
         data-time="now"
         data-size="22">
    </div>
    {% else %}
    <hr class="header_rule">
    <p>{% trans "No data available yet." %}</p>
    {% endif %}
  </div>
</div>