{% extends 'base.html' %}
{% load i18n horizon humanize sizeformat %}

{% block title %}{% trans "Hypervisors" %}{% endblock %}

{% block main %}
<div class="quota-dynamic">
  <h3>{% trans "Hypervisor Summary" %}</h3>
    <div class="col-sm-4 d3_quota_bar">
      <div class="pie-chart-usage" data-used="{% widthratio stats.memory_mb_used stats.memory_mb 100 %}"></div>
      <div class="h5">{% trans "Memory Usage" %}</div>
      <div class="h6">
         {% blocktrans with used=stats.memory_mb_used|mb_float_format available=stats.memory_mb|mb_float_format %}Used <span> {{ used }} </span> of <span> {{ available }} </span>{% endblocktrans %}
      </div>
    </div>

    <div class="col-sm-4 d3_quota_bar">
      <div class="pie-chart-usage" data-used="{% widthratio stats.local_gb_used stats.local_gb 100 %}"></div>
       <div class="h5">{% trans "Local Disk Usage" %}</div>
       <div class="h6">
         {% blocktrans with used=stats.local_gb_used|diskgbformat available=stats.local_gb|diskgbformat %}Used <span> {{ used }} </span> of <span> {{ available }} </span>{% endblocktrans %}
       </div>
    </div>
</div>
<div class="quota-dynamic">
  <h3>{% trans "Resource Providers Summary" %}</h3>
  {% for provider in providers %}
    <h4>{{ provider.name }}</h4>
    <div class="col-sm-4 d3_quota_bar col-lg-3 col-md-2 col-xs-4">
      <div class="pie-chart-usage" data-used="{% widthratio provider.vcpus_used provider.vcpus_capacity 100 %}"></div>
      <div class="h5">{% trans "vCPU Usage" %}</div>
      {% if provider.inventories.VCPU != None %}
      <div class="h6">
        {% blocktrans with used=provider.vcpus_used|intcomma available=provider.vcpus_capacity|intcomma %}Used <span> {{ used }} </span> of <span> {{ available }} </span>{% endblocktrans %}
      </div>
      {% endif %}
    </div>

    <div class="col-sm-4 d3_quota_bar col-lg-3 col-md-2 col-xs-4">
      <div class="pie-chart-usage" data-used="{% widthratio provider.pcpus_used provider.pcpus_capacity 100 %}"></div>
      <div class="h5">{% trans "pCPU Usage" %}</div>
      {% if provider.inventories.PCPU != None %}
      <div class="h6">
        {% blocktrans with used=provider.pcpus_used|intcomma available=provider.pcpus_capacity|intcomma %}Used <span> {{ used }} </span> of <span> {{ available }} </span>{% endblocktrans %}
      </div>
      {% endif %}
    </div>

    <div class="col-sm-4 d3_quota_bar col-lg-3 col-md-2 col-xs-4">
      <div class="pie-chart-usage" data-used="{% widthratio provider.memory_mb_used provider.memory_mb_capacity 100 %}"></div>
      <div class="h5">{% trans "Memory Usage" %}</div>
      <div class="h6">
         {% blocktrans with used=provider.memory_mb_used|mb_float_format available=provider.memory_mb_capacity|mb_float_format %}Used <span> {{ used }} </span> of <span> {{ available }} </span>{% endblocktrans %}
      </div>
    </div>

    <div class="col-sm-4 d3_quota_bar col-lg-3 col-md-2 col-xs-4">
      <div class="pie-chart-usage" data-used="{% widthratio provider.disk_gb_used provider.disk_gb_capacity 100 %}"></div>
       <div class="h5">{% trans "Local Disk Usage" %}</div>
       <div class="h6">
         {% blocktrans with used=provider.disk_gb_used|diskgbformat available=provider.disk_gb_capacity|diskgbformat %}Used <span> {{ used }} </span> of <span> {{ available }} </span>{% endblocktrans %}
       </div>
    </div>
  {% endfor %}
</div>
<div class="row-fluid">
  <div class="col-sm-12">
    {{ tab_group.render }}
  </div>
</div>
{% endblock %}
