@(loggedInUser: common.User)

<div class="modal fade" id="changeMemberUsersModal" data-backdrop="static" data-keyboard="true" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span><span class="sr-only">Close</span>
                </button>
                <h4 class="modal-title">Change who is member of this study</h4>
            </div>
            <div class="modal-body">

                <div class="messages"></div>

                <form id="addMemberToStudyForm" action="#" class="form-horizontal col-xs-12" role="form">
                    <label class="control-label" for="username">Add user by username
                        <span class="glyphicon glyphicon-info-sign gray-light"
                            data-toggle="tooltip" title="They have to be a user of JATOS already.">
                        </span>
                    </label>
                    <div class="row">
                        <div class="btn-toolbar" role="toolbar">
                            <div class="col-xs-8">
                                <div class="input-group">
                                    <input type="text" class="form-control username" name="username" placeholder="username">
                                    <span class="input-group-btn">
                                        <input type="submit" class="btn btn-primary" value="Add">
                                    </span>
                                </div>
                            </div>
                            <div class="btn-group">
                                <button id="addAllMemberButton" type="button" class="btn btn-primary"
                                    data-toggle="tooltip" data-placement="bottom"
                                    title="Give all users access to this study">
                                    Add All
                                </button>
                                <button id="removeAllMemberButton" type="button" class="btn btn-primary"
                                    data-toggle="tooltip" data-placement="bottom"
                                    title="Remove access rights to this study from all users except yourself">
                                    Remove All
                                </button>
                            </div>
                        </div>
                    </div>
                </form>

                <div class="form-group">&nbsp;</div>

                <table class="table" width="100%">
                    <thead>
                        <tr>
                            <th>Member</th>
                            <th>Name</th>
                        </tr>
                    </thead>
                    <!-- Member users are added in JS -->
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Template for member toggle button in user's row -->
<div id="memberToggleButtonDiv" style="display: none">
    <button type="button" class="btn btn-default memberToggleButton"
        data-toggle="tooltip" data-placement="bottom" title="">
        <span class="glyphicon glyphicon-ok"></span>
    </button>
</div>

<script>

// Max length of each worker table before pagination kicks in
var paginationLength = 10;
var memberUserTable;

$('#studyToolbar').on('click', '#changeMemberUsersLink', function() {
    removeAlerts("#changeMemberUsersModal");
    removeFormErrors("#changeMemberUsersModal");
    clearForm("#addMemberToStudyForm");
    initMemberUserTable();
    $('#changeMemberUsersModal').modal('show');
});

function initMemberUserTable() {
    if (typeof memberUserTable != 'undefined') {
        memberUserTable.ajax.reload();
        memberUserTable.draw();
        return;
    }

    memberUserTable = $('#changeMemberUsersModal .table').DataTable({
        "ajax": {
            "type": "GET",
            "url" : "@{general.common.Common.getPlayHttpContext()}jatos/" + studyId + "/memberUsers",
            "error": function (err) {
                if (err.responseText) {
                    showError(err.responseText, "#changeMemberUsersModal .messages");
                } else {
                    showError("Cannot read members data.", "#changeMemberUsersModal .messages");
                }
            }
        },
        "initComplete": toggleTablePagination,
        "dom": 'tp',
        "order": [[ 1, "asc" ]],
        "pageLength": paginationLength,
        "columns": [
            { "class": 'memberInStudyColumn',
                "data": null,
                "defaultContent": '',
                "width": "1%",
                "orderable": false,
                "searchable": false,
                "searchable": false,
                "render": function (data, type, full, meta) {
                    var button = $('#memberToggleButtonDiv button:first-child').clone();
                    setMemberButton(button, data.isMember);
                    return button.prop('outerHTML');
                }
            },
            { "data": "name" }
        ]
    });
}

function setMemberButton(button, isMember) {
    if (isMember) {
        button.addClass('isMember');
        button.removeClass('btn-default');
        button.addClass('btn-primary');
        button.attr('title', "Click to remove this user from this study");
        button.html($(button.html())
                .removeClass('glyphicon-remove')
                .addClass('glyphicon-ok').prop('outerHTML'));
    } else {
        button.removeClass('isMember');
        button.removeClass('btn-primary');
        button.addClass('btn-default');
        button.attr('title', "Click to let this user become a member of this study");
        button.html($(button.html())
                .removeClass('glyphicon-ok')
                .addClass('glyphicon-remove').prop('outerHTML'));
    }
}

function toggleTablePagination() {
    var rowNumber = memberUserTable.rows().count();
    var hidePaging = rowNumber <= paginationLength;
    $('#changeMemberUsersModal .table').parent().find('.dataTables_paginate').toggle(!hidePaging);
}

$('#changeMemberUsersModal').on('click', '#addAllMemberButton', function() {
    $.ajax({
        url : '@{general.common.Common.getPlayHttpContext()}jatos/' + studyId + '/memberUsers',
        type : "POST",
        success: function(user) {
            removeAlerts("#changeMemberUsersModal");
            memberUserTable.ajax.reload(toggleTablePagination);
        },
        error : function(err) {
            removeAlerts("#changeMemberUsersModal");
            showError(err.responseText, "#changeMemberUsersModal .messages");
        }
    });
});

$('#changeMemberUsersModal').on('click', '#removeAllMemberButton', function() {
    $.ajax({
        url : '@{general.common.Common.getPlayHttpContext()}jatos/' + studyId + '/memberUsers',
        type : "DELETE",
        success: function(user) {
            removeAlerts("#changeMemberUsersModal");
            memberUserTable.ajax.reload(toggleTablePagination);
        },
        error : function(err) {
            removeAlerts("#changeMemberUsersModal");
            showError(err.responseText, "#changeMemberUsersModal .messages");
        }
    });
});

$('#addMemberToStudyForm').submit(function(event) {
    event.preventDefault();
    var usernameToChange = $('#addMemberToStudyForm .username').val();
    $.ajax({
        url : '@{general.common.Common.getPlayHttpContext()}jatos/' + studyId + '/memberUser?username=' + usernameToChange + '&isMember=true',
        type : "POST",
        success: function(user) {
            removeAlerts("#changeMemberUsersModal");
            alterTableAfterUserAdding(user);
        },
        error : function(err) {
            removeAlerts("#changeMemberUsersModal");
            showError(err.responseText, "#changeMemberUsersModal .messages");
        }
    });
});

function alterTableAfterUserAdding(user) {
    var isAlreadyInTable = false;
    memberUserTable.rows().every(function(rowIdx, tableLoop, rowLoop) {
        var tableMember = this.data();
        if (tableMember.username.toLowerCase() === user.username.toLowerCase()) {
            isAlreadyInTable = true;
            if (tableMember.isMember) {
                var msg = "User " + user.name + " (" + user.username + ") is already member.";
                showInfo(msg, "#changeMemberUsersModal .messages");
            } else {
                var button = $(this.node()).find('.memberToggleButton');
                setMemberButton(button, user.isMember);
            }
            this.data(user);
            return;
        }
    });
    if (!isAlreadyInTable) {
        memberUserTable.row.add(user).draw(false);
        toggleTablePagination();
    }
}

$('#changeMemberUsersModal .table').on('click', '.memberToggleButton', function() {
    var button = this;
    var tr = $(this).closest('tr');
    var tableMember = memberUserTable.row(tr).data();
    //var isMember = $(this).hasClass('isMember');
    if (tableMember.username === "@loggedInUser.getUsername()" && !tableMember.removeConfirmation) {
        showWarning("Are you sure you want to remove yourself from this study? "
            + "Then click again on the member checkbox.", "#changeMemberUsersModal .messages");
        tableMember.removeConfirmation = true;
        return;
    }
    $.ajax({
        url : '@{general.common.Common.getPlayHttpContext()}jatos/' + studyId + '/memberUser?username=' + tableMember.username + '&isMember=' + !tableMember.isMember,
        type : "POST",
        success: function(user) {
            removeAlerts("#changeMemberUsersModal");
            memberUserTable.row(tr).data(user);
            setMemberButton($(button), user.isMember);
        },
        error : function(err) {
            removeAlerts("#changeMemberUsersModal");
            showError(err.responseText, "#changeMemberUsersModal .messages");
        }
    });
});

</script>