{% extends "horizon/common/_modal_form.html" %}
{% load i18n horizon humanize %}

{% block form_id %}{% endblock %}
{% block form_action %}{% url horizon:project:volumes:create %}?{{ request.GET.urlencode }}{% endblock %}

{% block modal_id %}create_volume_modal{% endblock %}
{% block modal-header %}{% trans "Create Volume" %}{% endblock %}

{% block modal-body %}
  <div class="left">
    <fieldset>
      {% include "horizon/common/_form_fields.html" %}
    </fieldset>
  </div>

  <div class="right quota-dynamic">
    <h3>{% trans "Description" %}:</h3>

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

    <h3>{% trans "Volume Quotas" %}</h3>

    <div class="quota_title clearfix">
      <strong>{% trans "Total Gigabytes" %} <span>({{ usages.gigabytes.used|intcomma }} {% trans "GB" %})</span></strong>
      <p>{{ usages.gigabytes.available|quota:_("GB")|intcomma }}</p>
    </div>

    <div id="quota_size" data-progress-indicator-for="id_size" data-quota-limit="{{ usages.gigabytes.quota }}" data-quota-used="{{ usages.gigabytes.used }}" class="quota_bar">
      {% horizon_progress_bar usages.gigabytes.used usages.gigabytes.quota %}
    </div>

    <div class="quota_title clearfix">
      <strong>{% trans "Number of Volumes" %} <span>({{ usages.volumes.used|intcomma }})</span></strong>
      <p>{{ usages.volumes.available|quota|intcomma }}</p>
    </div>

    <div id="quota_volumes" data-progress-indicator-step-by="1" data-quota-limit="{{ usages.volumes.quota }}" data-quota-used="{{ usages.volumes.used }}" class="quota_bar">
      {% horizon_progress_bar usages.volumes.used usages.volumes.quota %}
    </div>
  </div>

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

{% block modal-footer %}
  <input class="btn btn-primary pull-right" type="submit" value="{% trans "Create Volume" %}" />
  <a href="{% url horizon:project:volumes:index %}" class="btn secondary cancel close">{% trans "Cancel" %}</a>
{% endblock %}