{% 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="d3_pie_chart_usage" data-used="{% widthratio stats.vcpus_used stats.vcpus 100 %}"></div>
      <div class="h5">{% trans "VCPU Usage" %}</div>
      <div class="h6">
        {% blocktrans with used=stats.vcpus_used|intcomma available=stats.vcpus|intcomma %}Used <span> {{ used }} </span> of <span> {{ available }} </span>{% endblocktrans %}
      </div>
    </div>

    <div class="col-sm-4 d3_quota_bar">
      <div class="d3_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="d3_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="row-fluid">
  <div class="col-sm-12">
    {{ tab_group.render }}
  </div>
</div>
{% endblock %}
