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

<div class="info row-fluid detail">
  <div class="span4">
    <h4>{% trans "About" %}</h4>
    <hr class="header_rule">
    <dl>
      <dt>{% trans "MAC Address" %}</dt>
      <dd>{{ baremetal_node.mac_address|default:_("None") }}</dd>
      <dt>{% trans "IPs" %}</dt>
      <dd>{{ baremetal_node.ip_address_other|default:_("None") }}</dd>
      <dt>{% trans "Management IP" %}</dt>
      <dd>{{ baremetal_node.pm_address|default:_("None") }}</dd>
      <dt>{% trans "Power Management" %}</dt>
      <dd>{{ tuskar_node.rack.power_management|default:_("-") }}</dd>
      <dt>{% trans "Status" %}</dt>
      <dd>{{ baremetal_node.status|default:_("None") }}</dd>
    </dl>
  </div>
  <div class="span4">
    <h4>{% trans "Resource Assignment" %}</h4>
    <hr class="header_rule">
    <dl>
      <dt>{% trans "Rack" %}</dt>
      {% if tuskar_node.rack %}
      <dd><a href="{% url 'horizon:infrastructure:resource_management:racks:detail' tuskar_node.rack_id %}">{{ tuskar_node.rack.name|default:_("None") }}</a></dd>
      {% else %}
      <dd>{% trans "None" %}</dd>
      {% endif %}
      <!--<dt>{% trans "Region" %}</dt>
      <dd>{{ tuskar_node.region|default:_("None") }}</dd>-->
      <dt>{% trans "Node Type" %}</dt>
      <dd>{{ tuskar_node.type|default:_("none") }}</dd>
      <dt>{% trans "Provisioned Image" %}</dt>
      <dd>{{ tuskar_node.image|default:_("None") }}</dd>
      <dt>{% trans "Running Instances" %}</dt>
      <dd>{{ running_instances }}</dd>
    </dl>
  </div>
  <div class="span4">
    <h4>{% trans "Capacities" %}</h4>
    <hr class="header_rule">
    <table class="capacities">
      <tr>
        <td class="capacity_label">{% trans "CPU" %}:</td>
        {% if tuskar_node.is_provisioned %}
        <td>
          <div id="cpu_capacity_usage"
               class="capacity_bar"
               data-chart-type="capacity_bar_chart"
               data-capacity-limit="{{ tuskar_node.cpu.value }}"
               data-capacity-used="{{ tuskar_node.cpu.usage }}"
               data-average-capacity-used="{{ 2 }}">
          </div>
        </td>
        <td>
          <a href="#" data-chart-type="modal_line_chart" data-url="/infrastructure/resource_management/racks/usage_data" data-series="cpu">{{ tuskar_node.cpu.usage }}/{{ tuskar_node.cpu.value }} {{ tuskar_node.cpu.unit }}</a>
        </td>
        {% else %}
        <td>
          <div id="cpu_capacity_usage"
               class="capacity_bar"
               data-chart-type="capacity_bar_chart">
          </div>
        </td>
        <td></td>
        {% endif %}
      </tr>
      <tr>
        <td class="capacity_label">{% trans "RAM" %}:</td>
        {% if tuskar_node.is_provisioned %}
        <td>
          <div id="ram_capacity_usage"
               class="capacity_bar"
               data-chart-type="capacity_bar_chart"
               data-capacity-limit="{{ tuskar_node.ram.value }}"
               data-capacity-used="{{ tuskar_node.ram.usage }}"
               data-average-capacity-used="{{ 12 }}">
          </div>
        </td>
        <td>
          <a href="#" data-chart-type="modal_line_chart" data-url="/infrastructure/resource_management/racks/usage_data" data-series="ram">{{ tuskar_node.ram.usage }}/{{ tuskar_node.ram.value }} {{ tuskar_node.ram.unit }}</a>
        </td>
        {% else %}
        <td>
          <div id="ram_capacity_usage"
               class="capacity_bar"
               data-chart-type="capacity_bar_chart">
          </div>
        </td>
        <td></td>
        {% endif %}
      </tr>
      <tr>
        <td class="capacity_label">{% trans "Storage" %}:</td>
        {% if tuskar_node.is_provisioned %}
        <td>
          <div id="storage_capacity_usage"
               class="capacity_bar"
               data-chart-type="capacity_bar_chart"
               data-capacity-limit="{{ tuskar_node.storage.value }}"
               data-capacity-used="{{ tuskar_node.storage.usage }}"
               data-average-capacity-used="{{ 6 }}">
          </div>
        </td>
        <td>
          <a href="#" data-chart-type="modal_line_chart" data-url="/infrastructure/resource_management/racks/usage_data" data-series="storage">{{ tuskar_node.storage.usage }}/{{ tuskar_node.storage.value }} {{ tuskar_node.storage.unit }}</a>
        </td>
        {% else %}
        <td>
          <div id="storage_capacity_usage"
               class="capacity_bar"
               data-chart-type="capacity_bar_chart">
          </div>
        </td>
        <td></td>
        {% endif %}
      </tr>
      <tr>
        <td class="capacity_label">{% trans "Network" %}:</td>
        {% if tuskar_node.is_provisioned %}
        <td>
          <div id="network_capacity_usage"
               class="capacity_bar"
               data-chart-type="capacity_bar_chart"
               data-capacity-limit="{{ tuskar_node.network.value }}"
               data-capacity-used="{{ tuskar_node.network.usage }}"
               data-average-capacity-used="{{ 40 }}">
          </div>
        </td>
        <td>
          <a href="#" data-chart-type="modal_line_chart" data-url="/infrastructure/resource_management/racks/usage_data" data-series="network">{{ tuskar_node.network.usage }}/{{ tuskar_node.network.value }} {{ tuskar_node.network.unit }}</a>
        </td>
        {% else %}
        <td>
          <div id="network_capacity_usage"
               class="capacity_bar"
               data-chart-type="capacity_bar_chart">
          </div>
        </td>
        <td></td>
        {% endif %}
      </tr>
    </table>
  </div>
</div>

<div class="row-fluid detail">
  <div class="span6">
    <h4>{% trans "Summary of Instances and Usage" %}</h4>
    <hr class="header_rule">
    {% if tuskar_node.is_provisioned %}
    <div>
      <strong>{{ tuskar_node.running_instances }}</strong> instances
      <strong>{{ tuskar_node.remaining_capacity }}%</strong>  capacity remaining
    </div>
    <div class="flavor_usage_bar"
         data-popup-free='{{ tuskar_node|remaining_capacity_by_flavors }}'
         data-single-bar-orientation="horizontal"
         data-single-bar-height="50"
         data-single-bar-width="100%"
         data-single-bar-used="{{ tuskar_node|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 tuskar_node.list_flavors %}
          <td class="flavor_usage_label">
            <a href="{% url 'horizon:infrastructure:resource_management:resource_classes:flavors:detail' tuskar_node.rack.resource_class.id flavor.id %}">{{ flavor.name }}</a>
          </td>
        {% endfor %}
      </tr>
      <tr>
        {% for flavor in tuskar_node.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 {{tuskar_node.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="40"
                 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 tuskar_node.list_flavors %}
          <td class="modal_chart flavor_usage_text"><a href="{{ "#" }}">{{ flavor.used_instances }}%</a></td>
        {% endfor %}
      </tr>
      <tr>
        {% for flavor in tuskar_node.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">
    <h4>{% trans "Active alerts" %}</h4>
    <hr class="header_rule">
    {% if tuskar_node.is_provisioned %}
      <ul>
       {% for alert in tuskar_node.alerts %}
         <li><i class="icon-warning-sign"></i>{{ alert.message }}</li>
       {% endfor %}
      </ul>
    {% else %}
    <p>{% trans "No data available yet." %}</p>
    {% endif %}
  </div>
</div>

<div class="row-fluid detail">
  <div class="span6">
    <h4>{% trans "Top Communicating Nodes" %}</h4>
    <hr class="header_rule">
    {% if tuskar_node.is_provisioned %}
    <div class="communication_charts_wrapper">
      <div class="communication_chart_wrapper">
        <h5>The most contacting</h5>
        <div id="most_contacting_racks"
             class="communication_chart"
             data-chart-type="circles_chart"
             data-url="{% url 'horizon:infrastructure:resource_management:racks:top_communicating' tuskar_node.rack_id %}?cond=from"
             data-time="now"
             data-size="22">
        </div>
      </div>
      <div class="communication_chart_connection"></div>
      <div class="communication_chart_wrapper">
        <h5>The most contacted</h5>
        <div id="most_contacted_racks"
             class="communication_chart"
             data-chart-type="circles_chart"
             data-url="{% url 'horizon:infrastructure:resource_management:racks:top_communicating' tuskar_node.rack.id %}?cond=to"
             data-time="now"
             data-size="22">
        </div>
      </div>
    </div>
    {% else %}
    <p>{% trans "No data available yet." %}</p>
    {% endif %}
  </div>
</div>