{% extends "horizon/common/_modal_form.html" %}
{% load i18n %}
{% load url from future %}
{% load form_helpers %}

{% block form_id %}scale_out_form{% endblock %}
{% block form_action %}{% url 'horizon:infrastructure:overview:scale_out' %}{% endblock %}

{% block modal_id %}scale_out_modal{% endblock %}
{% block modal-header %}{% trans "Scale-out Deployment" %}{% endblock %}

{% block modal-body %}
<div class="scale-out-form">
  {% include 'horizon/common/_form_errors.html' with form=form %}
{% for role in roles %}
    <div class="form-group well well-sm clearfix{% if role.field.errors %} error{% endif %} {{ role.field.css_classes }}">
      <div class="col-xs-8 deploy-role-name">
        <span class="deployment-roles-label">{{ role.name|capfirst }}</span>
        {% for error in role.field.errors %}
            <span class="help-block"><span class="text-danger">
              {{ error }}
            </span></span>
        {% endfor %}
      </div>
      <div class="col-xs-2 deploy-role-count">
        {{ role.planned_node_count }} →
      </div>
      <div class="col-xs-2 deploy-role-count">
        {{ role.field|add_bootstrap_class }}
      </div>
    </div>
{% endfor %}
</div>

<script type="text/javascript">
(window.$ || window.addHorizonLoadEvent)(function () {
    tuskar.number_picker.init();
});
</script>

{% endblock %}
