{% load i18n horizon humanize bootstrap tionix_tags %}

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

<p>{% block title %}{% trans "Volumes are block devices that can be attached to instances." %}{% endblock %}</p>

{% block description %}
  <div id="id_show_volume_type_desc_div">
    <h3>{% trans "Volume Type Description:" %}</h3>
    <h4>
      <strong id="id_show_volume_type_name"></strong>
    </h4>
    <p id="id_show_volume_type_desc"></p>
  </div>
{% endblock %}

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

<div class="quota_title">
  <div class="pull-left">
    <strong>{% trans "Total Gibibytes" %}</strong>
  </div>
  <span class="pull-right">
  {% with quota=usages.maxTotalVolumeGigabytes used=usages.totalGigabytesUsed|intcomma %}
    {% if quota|quotainf != '-1' %}
      {% blocktrans with quota=quota|intcomma %}{{ used }} of {{ quota }} GiB Used{% endblocktrans %}
    {% else %}
      {% blocktrans %}{{ used }} GiB Used (No Limit){% endblocktrans %}
    {% endif %}
  {% endwith %}
  </span>
</div>

{{ minifyspace }}
<div id="quota_size"
     data-progress-indicator-for="id_size"
     data-quota-limit="{{ usages.maxTotalVolumeGigabytes }}"
     data-quota-used={% block gigabytes_used_progress %}"{{ usages.totalGigabytesUsed }}"{% endblock %}
     class="quota_bar">
  {% widthratio usages.totalGigabytesUsed usages.maxTotalVolumeGigabytes 100 as gigabytes_percent %}
  {% bs_progress_bar gigabytes_percent 0 %}
</div>
{{ endminifyspace }}

<div class="quota_title">
  <div class="pull-left">
    <strong>{% block type_title %}{% trans "Number of Volumes" %}{% endblock %}</strong>
  </div>
  <span class="pull-right">
    {% block used_of_quota %}
      {% with quota=usages.maxTotalVolumes used=usages.totalVolumesUsed|intcomma %}
      {% if quota|quotainf != '-1' %}
        {% blocktrans with quota=quota|intcomma %}{{ used }} of {{ quota }} Used{% endblocktrans %}
      {% else %}
        {% blocktrans %}{{ used }} Used (No Limit){% endblocktrans %}
      {% endif %}
      {% endwith %}
    {% endblock %}
  </span>
</div>

{{ minifyspace }}
<div id={% block type_id %}"quota_volumes"{% endblock %}
     data-quota-limit={% block total_progress %}"{{ usages.maxTotalVolumes }}"{% endblock %}
     data-quota-used={% block used_progress %}"{{ usages.totalVolumesUsed }}"{% endblock %}
     class="quota_bar">
  {% block show_progress_bar %}
    {% widthratio usages.totalVolumesUsed usages.maxTotalVolumes 100 as volumes_percent %}
    {% if usages.numRequestedItems %}
      {% widthratio 100 usages.maxTotalVolumes usages.numRequestedItems as single_step %}
    {% else %}
      {% widthratio 100 usages.maxTotalVolumes 1 as single_step %}
    {% endif %}
    {% bs_progress_bar volumes_percent single_step %}
  {% endblock %}
</div>
{{ endminifyspace }}

<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>