{% load static %}
<!-- Edit Package Permission -->
<div id="edit_package_permissions_modal" class="modal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Grant or Revoke Permissions</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>
                    Modify permissions for this package. Note that if you give <code>write</code>
                    permissions to a user or group, <code>read</code> permissions will be granted automatically.
                    <br>
                    To allow users to perform destructive actions, such as deleting the package, <code>owner</code>
                    permissions must be granted.
                </p>

                <div class="row">
					<div class="col-xs-4">
						<legend>User or Group</legend>
					</div>
					<div class="col-xs-2">
						<legend>Read</legend>
					</div>
					<div class="col-xs-2">
						<legend>Write</legend>
					</div>
					<div class="col-xs-2">
						<legend>Owner</legend>
					</div>
				</div>

                <div class="row">
                    <form id="modal-form-permissions" class="form-inline" role="form" accept-charset="UTF-8" action=""
                          data-remote="true" method="post">
                        {% csrf_token %}
                        <div class="col-xs-4">
                            <select id="select_grantee" name="grantee" 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>
                        </div>
                        <div class="col-xs-2">
                            <input type="checkbox" name="read" id="read_new"/>
                        </div>
                        <div class="col-xs-2">
                            <input type="checkbox" name="write" id="write_new"/>
                        </div>
                        <div class="col-xs-2">
                            <input type="checkbox" name="owner" id="owner_new"/>
                        </div>
                        <div class="col-xs-2">
                            <button type="submit" style="width:60%;" class="btn col-xs-2 modify-perm-button">
                                <span class="glyphicon glyphicon-plus"></span>
                            </button>
                        </div>
                    </form>
                </div>
                <p></p>
                {% for up in user_permissions %}
                <div class="row">
                    <form id="modal-form-permissions_{{ up.user.uuid }}" class="form-inline" role="form"
                          accept-charset="UTF-8" action="" data-remote="true" method="post">
                        {% csrf_token %}
                        <div class="col-xs-4">
                            {{ up.user.username }}
                            <input type="hidden" name="grantee" value="{{ up.user.url }}"/>
                        </div>
                        <div class="col-xs-2">
                            <input type="checkbox" name="read" id="read_{{ up.user.uuid }}" {% if up.has_read %} checked {% endif %}/>
                        </div>
                        <div class="col-xs-2">
                            <input type="checkbox" name="write" id="write_{{ up.user.uuid }}" {% if up.has_write %} checked {% endif %}/>
                        </div>
                        <div class="col-xs-2">
                            <input type="checkbox" name="owner" id="owner_{{ up.user.uuid }}" {% if up.has_all %} checked {% endif %}/>
                        </div>
                        <div class="col-xs-2">
                            <button type="submit" style="width:60%;" class="btn col-xs-2 modify-perm-button">
                                <span class="glyphicon glyphicon-ok"></span>
                            </button>
                        </div>
                    </form>
                </div>
                {% endfor %}
                <p></p>
                {% for gp in group_permissions %}
                <div class="row">
                    <form id="modal-form-permissions_{{ gp.user.uuid }}" class="form-inline" role="form"
                          accept-charset="UTF-8" action="" data-remote="true" method="post">
                        {% csrf_token %}
                        <div class="col-xs-4">
                            {{ gp.group.name|safe }}
                            <input type="hidden" name="grantee" value="{{ gp.group.url }}"/>
                        </div>
                        <div class="col-xs-2">
                            <input type="checkbox" name="read" id="read_{{ gp.group.uuid }}" {% if gp.has_read %} checked {% endif %}/>
                        </div>
                        <div class="col-xs-2">
                            <input type="checkbox" name="write" id="write_{{ gp.group.uuid }}" {% if gp.has_write %} checked {% endif %}/>
                        </div>
                        <div class="col-xs-2">
                            <input type="checkbox" name="owner" id="owner_{{ gp.group.uuid }}" {% if gp.has_all %} checked {% endif %}/>
                        </div>
                        <div class="col-xs-2">
                            <button type="submit" style="width:60%;" class="btn col-xs-2 modify-perm-button">
                                <span class="glyphicon glyphicon-ok"></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 checkboxClick() {
    // id looks like read_3cadef24-220e-4587-9fa5-0e9a17aca2da
    parts = this.id.split('_');
    perm = parts[0];
    id = parts[1];

    readbox = '#read_' + id;
    writebox = '#write_' + id;
    ownerbox = '#owner_' + id;


    if (perm == 'read' && !$(readbox).prop("checked")) {
        $(writebox).prop("checked", false);
        $(ownerbox).prop("checked", false);
    }

    if (perm == 'write') {
        if ($(writebox).prop("checked")) {
            $(readbox).prop("checked", true);
        }
        if (!$(writebox).prop("checked")) {
            $(ownerbox).prop("checked", false);
        }
    }

    if (perm == 'owner') {
        if ($(ownerbox).prop("checked")) {
            $(readbox).prop("checked", true);
            $(writebox).prop("checked", true);
        }
    }
}

$(function() {

    $('#edit-package-modal-submit').click(function(e){
        e.preventDefault();
        $('#edit-package-modal-form').submit();
    });

    $("#select_grantee").selectpicker();

    // Add click functions to permission checkboxes
    $('[id^="read_"]').on('click', checkboxClick);
    $('[id^="write_"]').on('click', checkboxClick);
    $('[id^="owner_"]').on('click', checkboxClick);

})
</script>