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

{% with id=backend|add:'.'|add:'groups' %}
<div class="row my-2">
  <div class="col-4 d-flex justify-content-end">
    <label class="form-label" for="{{ id }}">
      <p class="text-break fs-5">{{ _('Groups')|add:' ('|add:backend|add:')' }}</p>
    </label>
  </div>
  <div class="col-8">
    <div class="row">
      <div id="{{ id }}_input_multivalue" class="px-0">
      {% with input_group_class="d-flex align-items-center justify-content-between px-0 my-2" input_class="form-control border border-secondary" %}
      {% for value in values %}
        <div id="{{ id }}_{{ forloop.counter0 }}" class="{{ input_group_class }}">
          <div class="flex-grow-1">
            <input type="text" class="{{ input_class }}" name="{{ id }}" value="{{ value }}">
          </div>
          <button type="button" class="btn-close input-remove" aria-label="Close" data-attribute="{{ id }}"></button>
        </div>
      {% empty %}
        <div id="{{ id }}_0" class="{{ input_group_class }}">
          <div class="flex-grow-1">
            <input type="text" class="{{ input_class }}" name="{{ id }}" value="">
          </div>
          <button type="button" class="btn-close input-remove" aria-label="Close" data-attribute="{{ id }}"></button>
        </div>
      {% endfor %}
      {% endwith %}
      </div>
      <div class="d-flex">
        <button type="button"
                class="btn btn-primary rounded-pill my-2 shadow button-round input-add"
                data-attribute="{{ id }}"
                data-size="{{ values|length }}">
          {% trans 'Add Input' %}
        </button>
      </div>
    </div>
  </div>
</div>
{% endwith %}
{% endfor %}