{% load i18n %}
{% for backend, values in groups.items %}

<div class="multi-valued-input form-group">

    <label class="control-label" for="{{ backend|add:'.'|add:'groups' }}">
        {% comment %} <span class="attribute-id">{{ backend|add:'.'|add:'groups' }}</span> {% endcomment %}
        <span class="attribute-name">{{ _('Groups')|add:' ('|add:backend|add:')' }}</span>
    </label>

    <div class="controls">
    {% for value in values %}
        <div class="multivalue-input-group">
            <input type="text" name="{{ backend|add:'.'|add:'groups' }}"
            value="{{ value }}"
            {% if attribute.required %}required{% endif %}><span class="input-remove">&#x2296;</span>
        </div>
    {% empty %}
        <div class="multivalue-input-group">
            <input type="text" name="{{ backend|add:'.'|add:'groups' }}" value="" {% if attribute.required %}required{% endif %}>
            <span class="input-remove">&#x2296;</span>
        </div>
    {% endfor %}

        <div class="button-round input-add"
            data-attribute="{{ backend|add:'.'|add:'groups' }}"
            data-size="{{ values|length }}"
            data-required="{% if attribute.required %}yes{% endif %}">{% trans 'Add Input' %}</div>
    </div>
</div>

{% endfor %}