{% load envipytags %}
{% 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|nh_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|nh_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>