{% load i18n %}
{% if op == 'add' %}
  <form class="wide-form-box" method="POST" action="{{ group_member_add_url }}">
    <h3>{% trans 'Add Members' %}</h3>
    <div class="multi-valued-input">
      <div class="resource-attribute">
        {% comment %} input要素を右寄せにするため {% endcomment %}
      </div>
      <div class="resource-values">
          <div class="input-group">
            <input type="text" name="member" value="" {% if properties.required %}required{% endif %}>
            <span class="input-remove">&#x2296;</span>
          </div>
      <div class="button-round input-add"
           data-attribute="member">{% trans 'Add Input' %}</div>
      </div>
    </div>
    {% include '_components/select_backends.html' with backends=resource.backends operation='add_members' default_select=resource.default_select %}
    {% csrf_token %}
    <button autocomplete="off">{% trans 'Add' %}</button>
  </form>
{% elif op == 'delete' and resource.members %}
  <form class="wide-form-box" method="POST" action="{{ group_member_delete_url }}">
    <h3>{% trans 'Delete Members' %}</h3>
    <div class="multi-valued-input">
      <div class="resource-attribute">
        {% comment %} input要素を右寄せにするため {% endcomment %}        
      </div>
      <div class="resource-values">
        {% for member in resource.members %}
          <div class="input-group">
            <div class="delete-members">
              <input type="checkbox" name="member" value="{{ member }}">
              <input type="text" value="{{ member }}" readonly>
            </div>
          </div>
        {% endfor %}
      </div>
    </div>
    {% include '_components/select_backends.html' with backends=resource.backends operation='delete_members' default_select=resource.default_select%}
    {% csrf_token %}
    <button autocomplete="off">{% trans 'Delete' %}</button>
  </form>
{% endif %}