@(request: Http.Request, signedinUser: common.User, breadcrumbs: String)

@views.html.gui.page.main(request, signedinUser, None, None, breadcrumbs) {

<main class="container-fluid overflow-auto mt-4">

    <table class="table table-hover align-middle w-100" id="userManagerTable">
        <thead>
            <tr>
                <th class="no-info-icon" data-bs-tooltip="Expand to see all studies that belong to this user">Studies<span class="info-icon"></span><span class="ordering-icon"></span></th>
                <th class="no-info-icon" data-bs-tooltip="A deactivated user cannot sign in anymore but their studies can still be run by participants (aka workers). To prevent a study from running deactivate it in the study manager.">Active<span class="info-icon"></span><span class="ordering-icon"></span></th>
                <th class="id">ID<span class="ordering-icon"></span></th>
                <th class="username">Username<span class="ordering-icon"></span></th>
                <th>Name<span class="ordering-icon"></span></th>
                <th>Email<span class="ordering-icon"></span></th>
                <th class="no-info-icon" data-bs-tooltip="Last successful sign-in of this user">Last sign-in<span class="info-icon"></span><span class="ordering-icon"></span></th>
                <th class="no-info-icon" data-bs-tooltip="Authentication method, e.g. either locally stored, LDAP, Google, OIDC, ORCID, SRAM or CONEXT">Auth<span class="info-icon"></span><span class="ordering-icon"></span></th>
                <th class="no-info-icon" data-bs-tooltip="Roles, e.g. Viewer, Viewer, Admin, Superuser, or NONE">Roles<span class="info-icon"></span><span class="ordering-icon"></span></th>
                <th class="no-info-icon" data-bs-tooltip="Switch between role Viewer and Viewer">Viewer/User<span class="info-icon"></span><span class="ordering-icon"></span></th>
                <th class="no-info-icon" data-bs-tooltip="Superusers are automatically a member in EVERY study and can do what a normal study member can do including reading/deleting result data or deleting the study altogether. A Superuser has NO access to administration tasks (like creating/deleting users, changing passwords) - only admin users can do this.">Superuser<span class="info-icon"></span><span class="ordering-icon"></span></th>
                <th class="no-info-icon" data-bs-tooltip="Users with the admin rights can e.g. add/change/delete other users and deactivate studies.">Admin<span class="info-icon"></span><span class="ordering-icon"></span></th>
                <th></th>
            </tr>
        </thead>
    </table>

    @* Template for button toolbar in User's row *@
    <div id="userToolbarDiv" class="d-none">
        <div class="float-end text-nowrap">
            <div class="user-settings btn-group no-info-icon" data-bs-tooltip="Change name or email of this user">
                <button class="btn btn-admin" type="button">
                    <i class="bi-gear-fill"></i><span class="d-none d-lg-inline ps-1">Settings</span>
                </button>
            </div>
            <div class="user-change-password btn-group no-info-icon" data-bs-tooltip="Change the password of this user">
                <button class="btn btn-admin" type="button">
                    <i class="bi-lock-fill"></i><span class="d-none d-lg-inline ps-1">Password</span>
                </button>
            </div>
            <div class="user-delete btn-group no-info-icon" data-bs-tooltip="Delete this user from JATOS">
                <button class="btn btn-admin" type="button">
                    <i class="bi-x-circle-fill"></i><span class="d-none d-lg-inline ps-1">Delete</span>
                </button>
            </div>
        </div>
    </div>

    @* Create User Modal *@
    <div class="modal fade" id="userCreatorModal" tabindex="-1" data-bs-config='{"backdrop":"static", "focus":true, "keyboard":true}'>
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header align-items-start">
                    <h5 class="modal-title text-truncate flex-grow-1">Add a new user</h5>
                    <button class="btn btn-close2 btn-xs btn-nav" type="button" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form class="form-admin" id="userCreatorForm">
                        <div class="row mb-3">
                            <label class="col-sm-3 col-form-label" for="userCreatorUsername">
                                Username<span class="input-required" data-bs-tooltip="required"></span>
                            </label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="userCreatorUsername" name="username" autocapitalize="none" autocomplete="off" required>
                                <span class="form-text">What will be the username of the new user? Username and password are used for authentication. E.g., email address.</span>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <label class="col-sm-3 col-form-label" for="userCreatorName">
                                Name<span class="input-required" data-bs-tooltip="required"></span>
                            </label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="userCreatorName" name="name" autocomplete="off" required>
                                <span class="form-text">The name is not used for authentication and only further describes the user.</span>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <label class="col-sm-3 col-form-label" for="userCreatorEmail">Email</label>
                            <div class="col-sm-9">
                                <input type="email" class="form-control" id="userCreatorEmail" name="email" autocomplete="off">
                                <span class="form-text">Optional email address of the user. This field is not used for authentication.</span>
                            </div>
                        </div>

                        <div class="row mb-3 d-none" id="userCreatorAuthByLdapDiv">
                            <legend class="col-sm-3 col-form-label pt-0">
                                LDAP
                            </legend>
                            <div class="col-sm-9">
                                <div class="form-check">
                                    <input class="form-check-input checkbox-admin" type="checkbox" name="authMethod" id="userCreatorAuthByLdap" value="LDAP" data-bs-toggle="collapse" data-bs-target="#userCreatorPasswordDiv">
                                    <label class="form-check-label" for="userCreatorAuthByLdap">
                                        Authenticate this user by your central LDAP service?
                                    </label>
                                </div>
                            </div>
                        </div>

                        <div class="collapse show" id="userCreatorPasswordDiv">
                            <div class="row">
                                <label class="control-label col-sm-3" for="userCreatorPassword">
                                    Password<span class="input-required" data-bs-tooltip="required"></span>
                                </label>
                                <div class="col-sm-4">
                                    <div class="input-group">
                                        <input type="password" class="form-control" id="userCreatorPassword" name="password" placeholder="Password" autocomplete="off">
                                        <button class="btn btn-nav password-visibility-toggle" type="button"><i></i></button>
                                    </div>
                                </div>
                            </div>
                            <div class="row offset-sm-3 mb-3">
                                <div class="form-text">xxx</div>
                            </div>
                        </div>
                    </form>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-admin" id="userCreatorConfirm">Add</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @* Edit user settings Modal *@
    <div class="modal fade" id="userSettingsModal" tabindex="-1" data-bs-config='{"backdrop":"static", "focus":true, "keyboard":false}'>
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header align-items-start">
                    <h5 class="modal-title text-truncate flex-grow-1">Change user settings</h5>
                    <button class="btn btn-close2 btn-xs btn-nav" type="button" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form class="form-admin" id="userSettingsForm">
                        <input type="hidden" id="userSettingsUsername" name="username" autocomplete="off">
                        <div class="row mb-3">
                            <label for="userSettingsName" class="col-sm-3 col-form-label input-required">Name</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="userSettingsName" name="name" autocomplete="off">
                            </div>
                        </div>
                        <div class="row mb-3">
                            <label for="userSettingsEmail" class="col-sm-3 col-form-label">Email</label>
                            <div class="col-sm-9">
                                <input type="email" class="form-control" id="userSettingsEmail" name="email" autocomplete="email">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-admin" id="userSettingsConfirm">Save</button>
                </div>
            </div>
        </div>
    </div>

    @* Change user password Modal *@
    <div class="modal fade" id="changePasswordModal" tabindex="-1" data-bs-config='{"backdrop":"static", "focus":true, "keyboard":false}'>
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header align-items-start">
                    <h5 class="modal-title text-truncate flex-grow-1">Change password</h5>
                    <button class="btn btn-close2 btn-xs btn-nav" type="button" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form class="form-admin" id="changePasswordForm">
                        <div class="input-group">
                            <input type="password" class="form-control" id="changePasswordNewPassword" name="newPassword" placeholder="New password" autocomplete="off" required>
                            <button class="btn btn-nav password-visibility-toggle" type="button"><i></i></button>
                        </div>
                        <span class="form-text" id="changePasswordStrengthDescription">xxx</span>
                        <input type="hidden" id="changePasswordUsername" name="username" autocomplete="off" required>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-admin" id="changePasswordConfirm">Change</button>
                </div>
            </div>
        </div>
    </div>

    @* Delete user confirmation Modal *@
    <div class="modal fade" id="deleteUserModal" tabindex="-1" data-bs-config='{"backdrop":"static", "focus":true, "keyboard":false}'>
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header align-items-start">
                    <h5 class="modal-title text-truncate flex-grow-1">Confirm user deletion</h5>
                    <button class="btn btn-close2 btn-xs btn-nav" type="button" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form class="form-danger" id="deleteUserForm">
                        <input type="hidden" id="deleteUserTargetUsername" name="username" autocomplete="off">
                        <div id="deleteUserConfirmationText"></div>
                        @if(signedinUser.isDb() || signedinUser.isLdap()){
                        <input type="password" class="form-control" id="deleteUserAdminPassword" name="password" placeholder="Your password" autocomplete="off" required>
                        <div class="form-text">Confirm with your (@signedinUser.getUsername()) password.</div>
                        } else {
                        <input type="text" class="form-control" id="deleteUserAdminUsername" name="confirmUsername" placeholder="Your username" autocomplete="off" required>
                        <div class="form-text">Confirm by typing your username (@signedinUser.getUsername()).</div>
                        }
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-danger" id="deleteUserConfirm">Delete</button>
                </div>
            </div>
        </div>
    </div>

</main>

<script @{helper.CSPNonce.attr} type="module">
    import * as Alerts from "@routes.Assets.versioned("lib/jatos-gui/javascripts/alerts.js")";
    import * as Helpers from "@routes.Assets.versioned("lib/jatos-gui/javascripts/helpers.js")";
    import * as WaitingModal from "@routes.Assets.versioned("lib/jatos-gui/javascripts/waitingModal.js")";
    import * as FormValidation from "@routes.Assets.versioned("lib/jatos-gui/javascripts/formValidation.js")";
    import * as PasswordVisibilityToggle from "@routes.Assets.versioned("lib/jatos-gui/javascripts/passwordVisibilityToggle.js")";

    const alerts = new Alerts.Named("user-manager");
    $("#userCreatorModal, #userSettingsModal, #changePasswordModal, #deleteUserModal").on('hide.bs.modal', alerts.hideAll);

    let dataTable;
    $(document).ready(function() {
        dataTable = $('#userManagerTable').DataTable({
            "ajax": {
                "url": window.routes.Users.allUserData,
                "dataSrc": "",
                "beforeSend": WaitingModal.show,
                "error": () => Alerts.error("Error reading user data"),
                "complete": WaitingModal.hide
            },
            "dom": `<'d-flex flex-row flex-wrap justify-content-between align-items-center form-admin gap-1 mt-1 mb-3'Bfl>
                    rt
                    <'d-flex flex-row flex-wrap justify-content-between align-items-center gap-1 mt-3'ip>`,
            "order": [[ 3, "asc" ]],
            "lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
            "pageLength": 10,
            "pagingType": "full_numbers",
            "scrollX": true,
            "columns": [
                {
                    "class": 'details-control',
                    "data": "studyCount",
                    "width": "1%",
                    "type": "num",
                    "render": function (data, type, full, meta) {
                        if (type === 'export' || type === 'sort') return data;
                        if (data === 0) {
                            return '<span class="text-body text-opacity-50">none</span>';
                        } else {
                            const tooltip = `This user has ${data} studies so far. Click here to get information about them.`
                            return `<button type="button" class="btn btn-admin collapse-study-data text-nowrap dropdown-toggle"
                                    data-bs-tooltip="${tooltip}">
                                    <span class="badge text-admin bg-white rounded-pill">${data}</span></button>`;
                        }
                    }
                },
                {
                    "className": "active-user",
                    "data": "active",
                    "searchable": false,
                    "width": "1%",
                    "render": function (data, type, full, meta) {
                        if (type === 'export' || type === 'sort') return data.toString();
                        let isDisabled = false;
                        let tooltip = "";
                        if (full.username === "admin") {
                            isDisabled = true;
                            tooltip = "It is not possible to deactivate user 'admin'.";
                        } else if (full.username === window.signedinUser.username) {
                            isDisabled = true;
                            tooltip = "You cannot deactivate yourself. Only another user with admin rights can do it.";
                        } else {
                            tooltip = "Click to de-/activate this user";
                        }
                        const checked = data ? "checked" : "";
                        const disabled = isDisabled ? "disabled" : "";
                        return `
                            <label class="switch no-info-icon mt-1" data-bs-tooltip="${tooltip}">
                                <input type="checkbox" ${checked} ${disabled}>
                                <span class="slider slider-admin round" ${disabled}></span>
                            </label>
                        `;
                    }
                },
                {
                    "data": "id",
                    "width": "1%"
                },
                {
                    "data": "username",
                    "render": function (data, type, full, meta) {
                        if (type === 'export' || type === 'sort') return data;
                        if (full.authMethod == "ORCID") {
                            // Show link to ORCID
                            return Helpers.generateOrcidLink(data);
                        } else {
                            // Every 40 chars add a <br>
                            return (data) ? data.replace(/(.{40})/g, "$1<br>") : '<span class="text-body text-opacity-50">none</span>';
                        }
                    }
                },
                {
                    "data": "name",
                    "render": function (data, type, full, meta) {
                        // Every 30 chars add a <br>
                        return (data) ? data.replace(/(.{30})/g, "$1<br>") : '<span class="text-body text-opacity-50">none</span>';
                    }
                },
                {
                    "data": "email",
                    "render": function (data, type, full, meta) {
                        // Every 40 chars add a <br>
                        return (data) ? data.replace(/(.{40})/g, "$1<br>") : '<span class="text-body text-opacity-50">none</span>';
                    }
                },
                {
                    "data": "lastSignin",
                    "render": Helpers.getLocalTimeDataTables
                },
                {
                    "data": "authMethod",
                    "render": Helpers.getAuthMethodText
                },
                {
                    "className": "role-list",
                    "data": "roles",
                    "render": function (data, type, full, meta) {
                        if (type === 'export' || type === 'sort') return data;
                        return data.map((r) => Helpers.getUserRoleText(r)).join(", ");
                    }
                },
                {
                    "className": "viewer-or-user",
                    "data": null,
                    "defaultContent": '',
                    "searchable": false,
                    "render": function (data, type, full, meta) {
                        const isUser = $.inArray("USER", data.roles) >= 0;
                        let isDisabled = false;
                        let tooltip = "";
                        if (type === 'export' || type === 'sort') return isUser.toString();
                        // Special treatment of admin users
                        if (data.username === "admin") {
                            isDisabled = true;
                            tooltip = "User admin's roles cannot be changed.";
                        } else if (data.username === window.signedinUser.username) {
                            isDisabled = true;
                            tooltip = "You cannot change your own roles. Only another user with admin rights can do it.";
                        } else {
                            tooltip = "Use this switch to switch between Viewer and Viewer role for this user.";
                        }
                        const checked = isUser ? "checked" : "";
                        const disabled = isDisabled ? "disabled" : "";
                        return `
                            <label class="switch no-info-icon mt-1" data-bs-tooltip="${tooltip}">
                                <input type="checkbox" ${checked} ${disabled}>
                                <span class="slider slider-admin round" ${disabled}></span>
                            </label>
                        `;
                    }
                },
                {
                    "className": "superuser",
                    "visible": window.common.isUserRoleAllowSuperuser,
                    "data": null,
                    "searchable": false,
                    "render": function (data, type, full, meta) {
                        const isSuperuser = $.inArray("SUPERUSER", data.roles) >= 0;
                        if (type === 'export' || type === 'sort') return isSuperuser.toString();
                        return `
                            <label class="switch no-info-icon mt-1" data-bs-tooltip="Use this switch to de-/activate the superuser role for this user.">
                                <input type="checkbox" ${isSuperuser ? "checked" : ""}>
                                <span class="slider slider-admin round"></span>
                            </label>
                        `;
                    }
                },
                {
                    "className": "admin",
                    "data": null,
                    "defaultContent": '',
                    "searchable": false,
                    "render": function (data, type, full, meta) {
                        const isAdmin = $.inArray("ADMIN", data.roles) >= 0;
                        let isDisabled = false;
                        let tooltip = "";
                        if (type === 'export' || type === 'sort') return isAdmin.toString();
                        // Special treatment of admin users
                        if (data.username === "admin") {
                            isDisabled = true;
                            tooltip = "User admin's admin rights cannot be removed.";
                        } else if (data.username === window.signedinUser.username) {
                            isDisabled = true;
                            tooltip = "You cannot remove your own admin rights. Only another user with admin rights can do it.";
                        } else {
                            tooltip = "Use this switch to de-/activate admin rights for this user.";
                        }
                        const checked = isAdmin ? "checked" : "";
                        const disabled = isDisabled ? "disabled" : "";
                        return `
                            <label class="switch no-info-icon mt-1" data-bs-tooltip="${tooltip}">
                                <input type="checkbox" ${checked} ${disabled}>
                                <span class="slider slider-admin round" ${disabled}></span>
                            </label>
                        `;
                    }
                },
                {
                    "data": null,
                    "orderable": false,
                    "searchable": false,
                    "render": function (data, type, full, meta) {
                        const toolbar = $('#userToolbarDiv').clone();
                        fillUserToolbar(toolbar, data.username, data.authMethod);
                        return toolbar.html();
                    }
                }
            ],
            "buttons": [
                {
                    "text": '<i class="bi-person-fill-add pe-1"></i>Add User',
                    "attr":  {
                        "id": "userCreatorButton",
                        "data-bs-toggle": "modal",
                        "data-bs-target": "#userCreatorModal",
                    },
                    "className": "btn btn-admin",
                },
                {
                    "extend": 'collection',
                    "text": '<i class="bi-box-arrow-up-right pe-1"></i>Export',
                    "className": "btn btn-admin",
                    "attr":  {
                        "data-bs-tooltip": "",
                        "data-bs-tooltip": "Export table data in CSV"
                    },
                    "buttons": [
                        {
                            "extend": 'csv',
                            "text": "Usernames",
                            "filename": () => { return "jatos_usernames_" + Helpers.getDateTimeYYYYMMDDHHmmss() },
                            "className": "dropdown-item-admin",
                            "attr":  {
                                "data-bs-tooltip": "Export usernames only in CSV format",
                                "data-bs-placement": "right"
                            },
                            "exportOptions": {
                                "columns": '.username',
                                "orthogonal": 'export',
                                "format": {
                                    "header": function ( data, row, column, node ) {
                                        // This is a hack to remove HTML tags
                                        return $('<div></div>').append(data).text();
                                    }
                                },

                            },
                            "action": (e, dt, button, config, cb) => {
                                $(".dt-button-collection").hide();
                                WaitingModal.show();
                                setTimeout(function(){
                                    $.fn.dataTable.ext.buttons.csvHtml5.action(e, dt, button, config, cb);
                                    WaitingModal.hide();
                                }, 1000);
                            }
                        },
                        {
                            "extend": 'csv',
                            "text": "All",
                            "className": "dropdown-item-admin",
                            "attr":  {
                                "data-bs-tooltip": "Export all user data in CSV format",
                                "data-bs-placement": "right"
                            },
                            "filename": () => { return "jatos_user_all_" + Helpers.getDateTimeYYYYMMDDHHmmss() },
                            "exportOptions": {
                                "columns": ':not(:nth-last-child(-n+4))',
                                "orthogonal": 'export',
                                "format": {
                                    "header": function ( data, row, column, node ) {
                                        // This is a hack to remove HTML tags
                                        return $('<div></div>').append(data).text();
                                    }
                                },
                            },
                            "trim": true,
                            "action": (e, dt, button, config, cb) => {
                                $(".dt-button-collection").hide();
                                WaitingModal.show();
                                setTimeout(() => {
                                    $.fn.dataTable.ext.buttons.csvHtml5.action(e, dt, button, config, cb);
                                    WaitingModal.hide();
                                }, 1000);
                            }
                        }
                    ]
                }
            ],
            language: {
                "lengthMenu": "Show: _MENU_",
                "paginate": {
                    "first": `<i class="bi-chevron-double-left"></i>`,
                    "previous": `<i class="bi-chevron-left"></i>`,
                    "next": `<i class="bi-chevron-right"></i>`,
                    "last": `<i class="bi-chevron-double-right"></i>`
                },
                "emptyTable": "No users yet"
            },
            "initComplete": function(settings, json) {
                $("#userManagerTable_wrapper .dt-buttons").removeClass("btn-group");
            },
            "drawCallback": function( settings ) {
                Helpers.setButtonWidthToMax("#userManagerTable_wrapper button.collapse-study-data");
                Helpers.activateTooltips('#userManagerTable_wrapper');
                $("#userManagerTable_wrapper .dt-length select").removeClass("form-select-sm");
                $("#userManagerTable_wrapper .dt-search input").removeClass("form-control-sm");
                Helpers.activateTooltipsOnDataTablesDropdowns(this.api());
            }
        });
    });

    $("#userCreatorModal").on('show.bs.modal', function() {
        $("#userCreatorForm")[0].reset();
        if (window.common.isLdapAllowed) $("#userCreatorAuthByLdapDiv").removeClass("d-none");
        $("#userCreatorPasswordDiv .form-text").html(window.common.userPasswordStrengthDescription
                + ` It must have at least ${window.common.userPasswordMinLength} characters.`);
        $('#userCreatorPasswordDiv').removeClass('collapse').addClass('collapse.show');
        PasswordVisibilityToggle.setPasswordVisibility(false);
    });

    $("#userCreatorConfirm").click(function(event) {
        $.ajax({
            type: 'POST',
            url: window.routes.Users.create,
            headers: { 'Csrf-Token': '@helper.CSRF.getToken.value' },
            data: $('#userCreatorForm').serialize(),
            success: function(user) {
                $('#userCreatorModal').modal('hide');
                FormValidation.clear("#userCreatorForm");
                Alerts.success(`The user "${user.username}" was added successfully.`);
                dataTable.row.add(user).draw();
            },
            error: function(response) {
                FormValidation.clear("#userCreatorForm");
                Alerts.warning("The user was not added.", 5000);
                if (Helpers.isJson(response.responseText)) {
                    FormValidation.show("#userCreatorForm", response.responseJSON);
                } else if (response.responseText) {
                    alerts.error(response.responseText);
                } else {
                    alerts.error("Couldn't add a new user");
                }
            }
        });
    });

    $('#userManagerTable').on('click', 'td.details-control', function() {
        const tr = $(this).closest('tr');
        const row = dataTable.row(tr);
        if (row.child.isShown()) {
            const collapseElement = row.child().find(".collapse");
            // First we collapse with Bootstrap and then we hide the DataTable row
            collapseElement.one('hidden.bs.collapse', row.child.hide);
            new bootstrap.Collapse(collapseElement).hide();
        } else {
            WaitingModal.show();
            const username = row.data().username;
            $.ajax({
                url: window.routes.Users.studiesDataByUser(username),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
            }).done(function(studiesData) {
                const childRow = generateStudiesDataChildRow(studiesData, username);
                // We first show the DataTables row and then de-collapse with Bootstrap
                row.child(childRow).show(); // Let DataTables add the child row. But it's still collapsed.
                tr.next().addClass('info').find("td:first").addClass("p-0");
                Helpers.activatePopovers('#userManagerTable');
                const collapseElement = row.child().find(".collapse");
                new bootstrap.Collapse(collapseElement).show();
                Helpers.activateTooltips(collapseElement);
            }).fail(function(err) {
                const errMsg = err.responseText ? err.responseText : "Couldn't get study data by user";
                Alerts.error(errMsg);
            }).always(WaitingModal.hide);
        }
    });

    function generateStudiesDataChildRow(studiesData, username) {
        const childRow = $(`
            <div class="d-flex flex-row collapse">
                <div class="title d-flex justify-content-end text-nowrap p-3 pb-5">Studies</div>
                <table class="table table-borderless m-0">
                    <thead>
                        <tr>
                            <th>Study ID</th>
                            <th>Study title</th>
                            <th data-bs-tooltip="All users who are member of this study">All members</th>
                            <th data-bs-tooltip="The size of the study assets folder">Study assets size</th>
                            <th data-bs-tooltip="The number of the study results">Result count</th>
                            <th data-bs-tooltip="The size of the result data: total for all study runs and the average per result in brackets">Result data size</th>
                            <th data-bs-tooltip="The size of the uploaded result files: total for all study runs and the average per result in brackets">Result file size</th>
                            <th data-bs-tooltip="When was this study last started by a participant (aka worker)?">Last started</th>
                        </tr>
                    </thead>
                </table>
            </div>
        `);

        if (studiesData.length == 0) {
            const row = $('<tbody><tr class="info"><td colspan="8">empty</td></tr></>tbody>');
            childRow.find("tbody").append(row);
            return childRow;
        }

        studiesData.forEach(function(study) {
            const row = $(`
                <tbody>
                    <tr class="info">
                        <td>${study.id}</td>
                        <td>${Helpers.trimTextWithThreeDots(study.title, 40)}</td>
                        <td>${Helpers.generateMembersHtml(study.members)}</td>
                        <td>${study.studyAssetsSize.humanReadable}</td>
                        <td>${study.studyResultCount}</td>
                        <td>${study.resultDataSize.humanReadable}</td>
                        <td>${study.resultFileSize.humanReadable}</td>
                        <td>${Helpers.getLocalTimeDataTables(study.lastStarted)}</td>
                    </tr>
                </tbody>
            `);
            childRow.find("table").append(row);
        });

        return childRow;
    }

    $('#userManagerTable').on('click', '.active-user input', function(e) {
        e.preventDefault();
        const checkbox = this;
        const isActive = $(checkbox).is(':checked');
        const tr = $(this).closest('tr');
        const user = dataTable.row(tr).data();
        $.ajax({
            url: window.routes.Api.updateUser(user.id),
            type: "PATCH",
            contentType: "application/json",
            data: JSON.stringify({ "active": isActive }),
            headers: { 'Csrf-Token': '@helper.CSRF.getToken.value' },
            success: () => {
                $(checkbox).prop('checked', isActive);
                user.active = isActive;
            },
            error: (err) => err.responseText ? Alerts.error(err.responseText) : Alerts.error("Couldn't toggle user activation")
        });
    });

    $('#userManagerTable').on('click', '.viewer-or-user input', function(e) {
        e.preventDefault();
        const checkbox = this;
        const role = $(checkbox).is(':checked') ? "USER" : "VIEWER";
        const tr = $(this).closest('tr');
        const user = dataTable.row(tr).data();
        $.ajax({
            url: window.routes.Api.changeUserRole(user.id),
            type: "PATCH",
            contentType: "application/json",
            data: JSON.stringify({ "role": role }),
            headers: { 'Csrf-Token': '@helper.CSRF.getToken.value' },
            success: (response) => {
                user.roles = response.data.roles;
                $(tr).find(".role-list").text(user.roles.map((r) => Helpers.getUserRoleText(r)).join(", "));
                const isUser = user.roles.includes("USER");
                $(checkbox).prop('checked', isUser);
            },
            error: (err) => {
                const message = err?.responseJSON?.error?.message ?? "Couldn't change user roles";
                alerts.error(message);
            }
        });
    });

    $('#userManagerTable').on('click', '.superuser input', function(e) {
        e.preventDefault();
        const checkbox = this;
        const isSuperuser = $(checkbox).is(':checked');
        const tr = $(this).closest('tr');
        const user = dataTable.row(tr).data();
        $.ajax({
            url: window.routes.Users.toggleRole("SUPERUSER", isSuperuser),
            type: "POST",
            data: { username: user.username },
            headers: { 'Csrf-Token': '@helper.CSRF.getToken.value' },
            success: (roles) => {
                user.roles = roles;
                $(tr).find(".role-list").text(user.roles.map((r) => Helpers.getUserRoleText(r)).join(", "));
                const isSuperuser = roles.includes("SUPERUSER");
                $(checkbox).prop('checked', isSuperuser);
            },
            error: (err) => err.responseText ? Alerts.error(err.responseText) : Alerts.error("Couldn't toggle superuser role")
        });
    });

    $('#userManagerTable').on('click', '.admin input', function(e) {
        e.preventDefault();
        const checkbox = this;
        const isAdmin = $(checkbox).is(':checked');
        const tr = $(this).closest('tr');
        const user = dataTable.row(tr).data();
        $.ajax({
            url: window.routes.Users.toggleRole("ADMIN", isAdmin),
            type: "POST",
            data: { username: user.username },
            headers: { 'Csrf-Token': '@helper.CSRF.getToken.value' },
            success: (roles) => {
                user.roles = roles;
                $(tr).find(".role-list").text(user.roles.map((r) => Helpers.getUserRoleText(r)).join(", "));
                const isAdmin = roles.includes("ADMIN");
                $(checkbox).prop('checked', isAdmin);
            },
            error: (err) => err.responseText ? Alerts.error(err.responseText) : Alerts.error("Couldn't toggle admin rights")
        });
    });

    function fillUserToolbar(toolbar, username, authMethod) {
        // Setup user settings button
        if (authMethod == "OAUTH_GOOGLE" || authMethod == "OIDC" || authMethod == "ORCID" || authMethod == "SRAM" || authMethod == "CONEXT") {
            disableButton(toolbar.find('.user-settings button'));
            toolbar.find('.user-settings').attr('data-bs-tooltip', "Google/OIDC/ORCID/SRAM/CONEXT authenticated users cannot be edited (they get their user data from the external identity provider).");
        }

        // Setup change password button
        if (username == "admin" && window.signedinUser.username != "admin") {
            disableButton(toolbar.find('.user-change-password button'));
            toolbar.find('.user-change-password').attr('data-bs-tooltip', "Only user admin can change their own password.");
        } else if (authMethod !== "DB") {
            disableButton(toolbar.find('.user-change-password button'));
            toolbar.find('.user-change-password').attr('data-bs-tooltip', "The password of not locally stored Users (e.g. authenticated by LDAP, OIDC, ORCID, SRAM, CONEXT or Google) cannot be changed in JATOS");
        }

        // Setup delete user button
        if (username == "admin") {
            disableButton(toolbar.find('.user-delete button'));
            toolbar.find('.user-delete').attr('data-bs-tooltip', "It is not possible to delete the user 'admin'.");
        } else if (username == window.signedinUser.username) {
            disableButton(toolbar.find('.user-delete button'));
            toolbar.find('.user-delete').attr('data-bs-tooltip', "You cannot delete your own user here - but you can delete yourself in the user menu (click on your username in the header).");
        }
    }

    function disableButton($btn) {
        $btn.attr('disabled', true)
            .removeClass("btn-admin")
            .addClass("btn-outline-secondary");
    }

    $('#userManagerTable').on('click', '.user-settings button:not(:disabled)', function() {
        const tr = $(this).closest("tr");
        const user = dataTable.row(tr).data();

        $("#userSettingsForm")[0].reset();
        FormValidation.clear("#userSettingsForm");
        Helpers.generateModalSubtitles("#userSettingsModal", {"Username": user.username});
        $('#userSettingsName').val(user.name);
        $('#userSettingsEmail').val(user.email);
        $('#userSettingsUsername').val(user.username);
        $("#userSettingsModal").modal('show');

        $("#userSettingsConfirm").off("click").on("click", function(event) {
            $.ajax({
                type: 'POST',
                url: window.routes.Users.edit(),
                headers: { 'Csrf-Token': '@helper.CSRF.getToken.value' },
                data: $('#userSettingsForm').serialize(),
                success: function() {
                    $('#userSettingsModal').modal('hide');
                    Alerts.success(`${user.username}'s settings were changed successfully.`);
                    user.name = $('#userSettingsName').val();
                    user.email = $('#userSettingsEmail').val();
                    dataTable.row(tr).data(user);
                },
                error: function(err) {
                    alerts.warning(`${user.username}'s settings were not changed.`, 5000);
                    if (Helpers.isJson(err.responseText)) {
                        FormValidation.show("#userSettingsForm", err.responseJSON);
                    } else if (err.responseText) {
                        alerts.error(err.responseText);
                    } else {
                        alerts.error("Couldn't change user settings");
                    }
                }
            });
        });
    });

    $('#userManagerTable').on('click', '.user-change-password button:not(:disabled)', function() {
        const tr = $(this).closest("tr");
        const user = dataTable.row(tr).data();
        $("#changePasswordForm")[0].reset();
        FormValidation.clear("#changePasswordForm");
        Helpers.generateModalSubtitles("#changePasswordModal", {"Username": user.username});
        $("#changePasswordUsername").val(user.username);
        PasswordVisibilityToggle.setPasswordVisibility(false);
        $('#changePasswordStrengthDescription').html(window.common.userPasswordStrengthDescription
                + ` It must have at least ${window.common.userPasswordMinLength} characters.`);
        $("#changePasswordModal").modal('show');

        $("#changePasswordConfirm").off("click").on("click", function(event) {
            $.ajax({
                type: 'POST',
                url: window.routes.Users.changePasswordByAdmin,
                headers: { 'Csrf-Token': '@helper.CSRF.getToken.value' },
                data: $('#changePasswordForm').serialize(),
                success: function(response) {
                    $('#changePasswordModal').modal('hide');
                    Alerts.success(`${user.username}'s password was changed successfully.`);
                },
                error: function(err) {
                    alerts.warning(`${user.username}'s password was not changed.`, 5000);
                    if (Helpers.isJson(err.responseText)) {
                        FormValidation.show("#changePasswordForm", err.responseJSON);
                    } else if (err.responseText) {
                        alerts.error(err.responseText);
                    } else {
                        alerts.error("Couldn't change user password");
                    }
                }
            });
        });
    });

    $('#userManagerTable').on('click', '.user-delete button:not(:disabled)', function() {
        const tr = $(this).closest("tr");
        const row = dataTable.row(tr);
        const user = row.data();
        $("#deleteUserForm")[0].reset();
        FormValidation.clear("#deleteUserForm");
        Helpers.generateModalSubtitles("#deleteUserModal", {"Username": user.username});
        $('#deleteUserConfirmationText').html(generateDeleteUserConfirmationHtml(user));
        $('#deleteUserTargetUsername').val(user.username);
        $("#deleteUserModal").modal('show');

        $("#deleteUserConfirm").off("click").on("click", function(event) {
            $.ajax({
                type: 'POST',
                url: window.routes.Users.remove(),
                headers: { 'Csrf-Token': '@helper.CSRF.getToken.value' },
                data: $('#deleteUserForm').serialize(),
                success: function(response) {
                    row.remove().draw();
                    $('#deleteUserModal').modal('hide');
                    Alerts.success(`User "${user.username}" was deleted successfully.`);
                },
                error: function(err) {
                    FormValidation.clear("#deleteUserForm");
                    alerts.warning(`User ${user.username} was not deleted.`, 5000);
                    if (Helpers.isJson(err.responseText)) {
                        FormValidation.show("#deleteUserForm", err.responseJSON);
                    } else if (err.responseText) {
                        alerts.error(err.responseText);
                    } else {
                        alerts.error("Couldn't delete user");
                    }
                }
            });
        });
    });

    function generateDeleteUserConfirmationHtml(user) {
        let confirmationText = `<p>You are about to delete the user <b>"${user.name}" (${user.username})</b>.</p>`;
        confirmationText += generateStudyList(user);
        confirmationText += `<p><b class="text-danger">This cannot be undone.</b></p>`;
        return confirmationText;
    }

    function generateStudyList(user) {
        // Only add the studies that have a user size of 1 (means this user is the only
        // member and the study would be abandoned after user deletion) .
        let studyList = "";
        $.each(user.studyList, function(index, study) {
            if (study.userSize === 1) {
                studyList += `<li>${study.title} (ID: ${study.id})</li>`;
            }
        });
        let text = "";
        if (studyList !== "") {
            text += "<p>All studies with this user as the only member user will be deleted too. <b>This would automatically delete the following studies with all their results</b>.";
            text += "<ul>" + studyList + "</ul>";
        }
        return text;
    }

</script>

}