{% load static %}
<!-- Edit Package Permission -->
<div id="edit_group_member_modal" class="modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Add or Remove Group Member</h5>
        <button
          type="button"
          class="close"
          data-dismiss="modal"
          aria-label="Close"
        >
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>
          To add member (either User or entire Groups) to this group select the
          entity you want to add below and click the check mark.
          <br />
          To remove member simply click the <code>X</code> next to the member.
        </p>

        <div class="row">
          <div class="col-xs-8">
            <legend>User or Group</legend>
          </div>
          <div class="col-xs-4">
            <legend>Add/Remove</legend>
          </div>
        </div>

        <div class="row">
          <form
            id="modal-form-group-member"
            class="form-inline"
            role="form"
            accept-charset="UTF-8"
            action=""
            data-remote="true"
            method="post"
          >
            {% csrf_token %}
            <div class="col-xs-8">
              <select
                id="select_member"
                name="member"
                data-actions-box="true"
                class="selPackages"
                data-width="100%"
              >
                <option disabled selected>User</option>
                {% for u in users %}
                  <option value="{{ u.url }}">{{ u.username }}</option>
                {% endfor %}
                <option disabled>Groups</option>
                {% for g in groups %}
                  <option value="{{ g.url }}">{{ g.name|safe }}</option>
                {% endfor %}
              </select>
              <input type="hidden" name="action" value="add" />
            </div>
            <div class="col-xs-2"></div>
            <div class="col-xs-2">
              <button type="submit" style="width:60%;" class="btn col-xs-2">
                <span class="glyphicon glyphicon-ok"></span>
              </button>
            </div>
          </form>
        </div>
        <p></p>
        {% for u in group.user_member.all %}
          <div class="row">
            <form
              id="modal-form-group-member_{{ u.uuid }}"
              class="form-inline"
              role="form"
              accept-charset="UTF-8"
              action=""
              data-remote="true"
              method="post"
            >
              {% csrf_token %}
              <div class="col-xs-8">
                {{ u.username }}
                <input type="hidden" name="member" value="{{ u.url }}" />
                <input type="hidden" name="action" value="remove" />
              </div>
              <div class="col-xs-2"></div>
              <div class="col-xs-2">
                <button type="submit" style="width:60%;" class="btn col-xs-2">
                  <span class="glyphicon glyphicon-trash"></span>
                </button>
              </div>
            </form>
          </div>
        {% endfor %}
        <p></p>
        {% for g in group.group_member.all %}
          <div class="row">
            <form
              id="modal-form-group-member_{{ g.uuid }}"
              class="form-inline"
              role="form"
              accept-charset="UTF-8"
              action=""
              data-remote="true"
              method="post"
            >
              {% csrf_token %}
              <div class="col-xs-8">
                {{ g.name|safe }}
                <input type="hidden" name="member" value="{{ g.url }}" />
                <input type="hidden" name="action" value="remove" />
              </div>
              <div class="col-xs-2"></div>
              <div class="col-xs-2">
                <button type="submit" style="width:60%;" class="btn col-xs-2">
                  <span class="glyphicon glyphicon-trash"></span>
                </button>
              </div>
            </form>
          </div>
        {% endfor %}
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">
          Close
        </button>
        <button
          type="button"
          class="btn btn-primary"
          id="edit-package-modal-submit"
        >
          Update
        </button>
      </div>
    </div>
  </div>
</div>
<script>
  $(function () {
    $("#edit-package-modal-submit").click(function (e) {
      e.preventDefault();
      $("#edit-package-modal-form").submit();
    });

    $("#select_member").selectpicker();
  });
</script>