{% load i18n horizon humanize %}

<h3>{% trans "Description:" %}</h3>

<p>{% blocktrans %}
   Volumes are block devices that can be attached to instances.
   {% endblocktrans %}
</p>

<div id="id_show_volume_type_desc_div">
    <h3>{% trans "Volume Type Description:" %}</h3>
    <h4><b><span id="id_show_volume_type_name"></span></b></h4>
    <p id="id_show_volume_type_desc"></p>
</div>

<h3>{% block head %}{% trans "Volume Limits" %}{% endblock %}</h3>

<div class="quota_title clearfix">
    <strong>{% trans "Total Gigabytes" %} <span>({% block gigabytes_used %}{{ usages.gigabytesUsed|intcomma }}{% endblock %} {% trans "GB" %})</span></strong>
  <p>{{ usages.maxTotalVolumeGigabytes|intcomma|quota:_("GB") }}</p>
</div>

<div id="quota_size" data-progress-indicator-for="id_size" data-quota-limit="{{ usages.maxTotalVolumeGigabytes }}" data-quota-used={% block gigabytes_used_progress %}"{{ usages.gigabytesUsed }}"{% endblock %} class="quota_bar">
</div>

<div class="quota_title clearfix">
    <strong>{% block type_title %}{% trans "Number of Volumes" %}{% endblock %} <span>({% block used %}{{ usages.volumesUsed|intcomma }}{% endblock %})</span></strong>
  <p>{% block total %}{{ usages.maxTotalVolumes|intcomma|quota }}{% endblock %}</p>
</div>

<div id={% block type_id %}"quota_volumes"{% endblock %} data-progress-indicator-step-by="1" data-quota-limit={% block total_progress %}"{{ usages.maxTotalVolumes }}"{% endblock %} data-quota-used={% block used_progress %}"{{ usages.volumesUsed }}"{% endblock %} class="quota_bar">
</div>

<script type="text/javascript" charset="utf-8">
  if(typeof horizon.Quota !== 'undefined') {
    horizon.Quota.init();
  } else {
    addHorizonLoadEvent(function() {
      horizon.Quota.init();
    });
  }

  if(typeof horizon.Volumes !== 'undefined'){
      horizon.Volumes.initWithTypes({{ volume_types|safe|default:"{}" }});
  } else {
    addHorizonLoadEvent(function() {
      horizon.Volumes.initWithTypes({{ volume_types|safe|default:"{}" }});
    });
  }
</script>
