{% extends "horizon/common/_modal_form.html" %}

{% load horizon i18n %}
{% load url from future %}

{% block form_id %}associate_floating_ip_form{% endblock %}
{% block form_action %}{% url 'horizon:project:access_and_security:floating_ips:allocate' %}{% endblock %}

{% block modal-header %}{% trans "Allocate Floating IP" %}{% 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 "Allocate a floating IP from a given floating IP pool." %}</p>

    <h3>{% trans "Project Quotas" %}</h3>
    <div class="quota_title">
      <strong>{% trans "Floating IP" %} <span>({{ usages.floating_ips.used }})</span></strong>
      <p>{{ usages.floating_ips.available|quota }}</p>
    </div>
    <div class="clearfix"></div>
    <div id="floating_ip_progress" class="quota_bar" data-quota-used="{{ usages.floating_ips.used }}" data-quota-limit="{{ usages.floating_ips.quota }}" data-progress-indicator-step-by="1"></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 "Allocate IP" %}" />
  <a href="{% url 'horizon:project:access_and_security:index' %}" class="btn btn-default secondary cancel close">{% trans "Cancel" %}</a>
{% endblock %}
