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

<h4>{% trans "Deployment Roles" %}</h4>
<div class="deploy-role-status">
{% for role in roles %}
    <div class="well well-sm clearfix">
      <div class="col-xs-2 deploy-role-icon">
        {% if role.planned_node_count %}
          <i class="fa fa-fw fa-lg {{ role.icon }}"></i>
        {% endif %}
      </div>
      <div class="col-xs-8 deploy-role-name">
        <strong
          class="deployment-roles-label"
        >{{ role.name }}</strong>
      </div>
      <div class="col-xs-2 deploy-role-count">
        {% if  role.finished %}
          {{ role.deployed_node_count }}
        {% else %}
          {{ role.deployed_node_count }}<small class="text-muted">/{{ role.planned_node_count }}</small>
        {% endif %}
      </div>
    </div>
{% endfor %}
</div>

<script type="text/html" id="roles-template">{% spaceless %}{% jstemplate %}
[[#roles]]
    <div class="well well-sm clearfix">
      <div class="col-xs-2 deploy-role-icon">
        [[#planned_node_count]]
          <i class="fa fa-fw fa-lg [[ icon ]]"></i>
        [[/planned_node_count]]
      </div>
      <div class="col-xs-8 deploy-role-name"><strong class="deployment-roles-label" >[[ name ]]</strong></div>
      <div class="col-xs-2 deploy-role-count">
        [[#finished]]
          [[ deployed_node_count ]]
        [[/finished]]
        [[^finished]]
          [[ deployed_node_count ]]<small class="text-muted">/[[ planned_node_count ]]</small>
        [[/finished]]
      </div>

    </div>
[[/roles]]
{% endjstemplate %}{% endspaceless %}</script>
