@(signedinUser: common.User)
@import general.common._

@* User sidebar *@
<aside class="offcanvas offcanvas-end rounded-start-4" tabindex="-1" id="userSidebar">
    <div class="offcanvas-header d-flex align-items-start">
        <div class="me-2">
            <img class="google-user-img rounded-circle border border-2 p-0 d-none" src="" width="32" height="32" alt="thumbnail">
            <minidenticon-svg username="@signedinUser.getUsername()" saturation="70" lightness="50"></minidenticon-svg>
        </div>
        <div class="offcanvas-title flex-grow-1 text-wrap">
            <span class="fw-bold" id="userSidebarUsername">xxx</span>
            (<span class="fw-medium" id="userSidebarName">xxx</span>)
            <span class="badge bg-secondary no-info-icon" id="userSidebarAuthMethod" data-bs-tooltip="The account type you used to sign in.">xxx</span>
            <span class="badge bg-secondary no-info-icon d-none" id="userSidebarAdminBadge" data-bs-tooltip="Users with admin rights can add/change/delete other users.">Admin</span>
            <span class="badge bg-secondary no-info-icon d-none" id="userSidebarViewerBadge" data-bs-tooltip="Viewers can read studies and results, but they cannot modify them.">Viewer</span>
            <span class="badge bg-secondary no-info-icon d-none" id="userSidebarSuperuserBadge" data-bs-tooltip="Superusers have access to every study.">Superuser</span>
        </div>
        <button type="button" class="btn btn-close2 btn-xs btn-nav" data-bs-dismiss="offcanvas"></button>
    </div>

    <div class="offcanvas-body">

        <ul class="navbar-nav">
            <li class="nav-item d-none" id="userSidebarSettingsButton" data-bs-dismiss="offcanvas" data-bs-target="#userSidebar">
                <button class="nav-link w-100 text-start p-2" type="button" data-bs-toggle="modal" data-bs-target="#myUserSettingsModal">
                    <i class="bi-gear-fill pe-1"></i>My settings
                </button>
            </li>

            <li class="nav-item d-none" id="userSidebarPasswordButton" data-bs-dismiss="offcanvas" data-bs-target="#userSidebar">
                <button class="nav-link w-100 text-start p-2" type="button" data-bs-toggle="modal" data-bs-target="#changeMyPasswordModal">
                    <i class="bi-lock-fill pe-1"></i>My password
                </button>
            </li>

            <li class="nav-item" data-bs-dismiss="offcanvas" data-bs-target="#userSidebar">
                <button class="nav-link w-100 text-start p-2" type="button" data-bs-toggle="modal" data-bs-target="#apiTokensModal">
                    <i class="bi-key-fill pe-1"></i>My API tokens
                </button>
            </li>
            <li class="nav-item"><hr></li>

            <div class="d-none" id="userSidebarDeleteButton">
                <li class="nav-item" data-bs-dismiss="offcanvas" data-bs-target="#userSidebar">
                    <button class="nav-link w-100 text-start p-2" id="deleteMyUserSidebarItem" type="button" data-bs-toggle="modal" data-bs-target="#deleteMyUserModal">
                        <i class="bi-person-x-fill pe-1"></i>Delete my user
                    </button>
                </li>
                <li class="nav-item"><hr></li>
            </div>

            @* Color theme *@
            <li class="nav-item" id="colorThemeDropdown">
                <button class="nav-link w-100 text-start p-2 dropdown-toggle collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#colorThemeDetails">
                        <span class="pe-1 theme-icon-active"><i class="bi-sun-fill"></i></span><span id="colorThemeText">Color theme</span>
                </button>
                <div class="collapse" id="colorThemeDetails">
                    <button class="dropdown-item d-flex align-items-center ms-4 p-1" type="button"  data-bs-theme-value="light">
                        <i class="bi-check2 me-2"></i>
                        <span class="pe-1 theme-icon"><i class="bi-sun-fill"></i></span>
                        Light
                    </button>
                    <button class="dropdown-item d-flex align-items-center ms-4 p-1" type="button"  data-bs-theme-value="dark">
                        <i class="bi-check2 me-2"></i>
                        <span class="pe-1 theme-icon"><i class="bi-moon-stars-fill"></i></span>
                        Dark
                    </button>
                    <button class="dropdown-item d-flex align-items-center ms-4 p-1" type="button"  data-bs-theme-value="system">
                        <i class="bi-check2 me-2"></i>
                        <span class="pe-1 theme-icon"><i class="bi-circle-half"></i></span>
                        System
                    </button>
                </div>
            </li>
            <li class="nav-item"><hr></li>

            <li class="nav-item">
                <button class="nav-link w-100 text-start p-2" id="userSidebarSignoutButton" type="button">
                    <i class="bi-door-open-fill pe-1"></i>Sign out
                </button>
            </li>
        </ul>
    </div>
</aside>

@* Edit user settings Modal *@
<div class="modal fade" id="myUserSettingsModal" tabindex="-1" data-bs-config='{"backdrop":"static", "focus":true, "keyboard":false}'>
    <div class="modal-dialog">
        <div class="modal-content">
            <form class="form-admin" id="myUserSettingsForm">
                <input type="hidden" id="myUserSettingsUsername" name="username">
                <div class="modal-header align-items-start">
                    <h5 class="modal-title text-truncate flex-grow-1">My settings</h5>
                    <button class="btn btn-close2 btn-xs btn-nav" type="button" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="row mb-3">
                        <label for="myUserSettingsName" class="col-sm-3 col-form-label input-required">Name</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="myUserSettingsName" name="name" autocomplete="name">
                        </div>
                    </div>
                    <div class="row mb-3">
                        <label for="myUserSettingsEmail" class="col-sm-3 col-form-label">Email</label>
                        <div class="col-sm-9">
                            <input type="email" class="form-control" id="myUserSettingsEmail" name="email" autocomplete="email">
                        </div>
                    </div>
                </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="myUserSettingsConfirm">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>

@* Change user password Modal *@
<div class="modal fade" id="changeMyPasswordModal" tabindex="-1" data-bs-config='{"backdrop":"static", "focus":true, "keyboard":false}'>
    <div class="modal-dialog">
        <div class="modal-content">
            <form class="form-admin" id="changeMyPasswordForm">
                <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">
                    <div class="row mb-3">
                        <label for="changeMyPasswordOldPassword" class="col-sm-4 col-form-label input-required">Old password</label>
                        <div class="col-sm-8">
                            <input type="password" class="form-control" id="changeMyPasswordOldPassword" name="oldPassword" placeholder="Old password" autocomplete="off" required>
                        </div>
                    </div>
                    <div class="row mb-3" id="changeMyPasswordNewPasswordDiv">
                        <label for="changeMyPasswordNewPassword" class="col-sm-4 col-form-label input-required">New password</label>
                        <div class="col-sm-8">
                            <div class="input-group">
                                <input type="password" class="form-control" id="changeMyPasswordNewPassword" name="newPassword" placeholder="New password" autocomplete="off" required>
                                <button class="btn btn-nav password-visibility-toggle" type="button"><i></i></button>
                            </div>
                            <div class="input-group">
                                <input type="password" class="form-control" id="changeMyPasswordNewPasswordRepeat" name="newPasswordRepeat" placeholder="Repeat the new password" autocomplete="off" required>
                            </div>
                            <span class="form-text" id="changeMyPasswordStrengthDescription">xxx</span>
                        </div>
                    </div>
                    <input type="hidden" id="changeMyPasswordUsername" name="username" autocomplete="off" required>
                </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="changeMyPasswordConfirm">Change</button>
                </div>
            </form>
        </div>
    </div>
</div>

@* Delete user confirmation Modal *@
<div class="modal fade" id="deleteMyUserModal" tabindex="-1" data-bs-config='{"backdrop":"static", "focus":true, "keyboard":false}'>
    <div class="modal-dialog">
        <div class="modal-content">
            <form class="form-danger" id="deleteMyUserForm">
                <input type="hidden" id="deleteMyUserTargetUsername" name="username" autocomplete="off">
                <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">
                    <div id="deleteMyUserConfirmationText"></div>
                    <div class="mb-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value="" id="deleteMyUserSafetyCheck">
                            <label class="form-check-label" for="deleteMyUserSafetyCheck">
                                Check this box, if you really want to delete your user
                            </label>
                        </div>
                    </div>
                    <div class="d-flex mb-3 d-none" id="deleteMyUserPasswordInput">
                        <label for="deleteMyUserPassword" class="col-form-label input-required">Your password</label>
                        <div class="flex-grow-1 ms-2 p-0">
                            <input type="password" class="form-control" id="deleteMyUserPassword" name="password" placeholder="Your password" autocomplete="off" required>
                        </div>
                    </div>
                    <div class="d-flex mb-3 d-none" id="deleteMyUserUsernameInput">
                        <label for="deleteMyUserUsername" class="col-form-label input-required">Your username</label>
                        <div class="flex-grow-1 ms-2 p-0">
                            <input type="text" class="form-control" id="deleteMyUserUsername" name="confirmUsername" autocomplete="off" required>
                        </div>
                    </div>
                </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="deleteMyUserConfirm">Delete</button>
                </div>
            </form>
        </div>
    </div>
</div>

@views.html.gui.admin.apiTokensModal()

<script @{helper.CSPNonce.attr} type="module">
    import * as Helpers from "@routes.Assets.versioned("lib/jatos-gui/javascripts/helpers.js")";
    import * as Alerts from "@routes.Assets.versioned("lib/jatos-gui/javascripts/alerts.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-sidebar");
    $("#userSidebar").on('show.bs.offcanvas', Alerts.hideAll);
    $("#myUserSettingsModal, #changeMyPasswordModal, #deleteMyUserModal").on('hide.bs.modal', alerts.hideAll);

    $("#userSidebarName").text(window.signedinUser.name);
    $("#userSidebarUsername").text(window.signedinUser.username);
    $("#userSidebarAuthMethod").html(Helpers.getAuthMethodText(window.signedinUser.authMethod));

    $("#userSidebarAdminBadge").toggleClass("d-none", !window.signedinUser.isAdmin);
    $("#userSidebarViewerBadge").toggleClass("d-none", !window.signedinUser.isViewer);
    $("#userSidebarSuperuserBadge").toggleClass("d-none", !window.signedinUser.isSuperuser);
    $("#userSidebarSettingsButton").toggleClass("d-none", !window.signedinUser.isDb && !window.signedinUser.isLdap);
    $("#userSidebarPasswordButton").toggleClass("d-none", !window.signedinUser.isDb);
    $("#userSidebarDeleteButton").toggleClass("d-none", window.signedinUser.username === "admin");

    $("#myUserSettingsModal").on('show.bs.modal', function() {
        $("#myUserSettingsForm")[0].reset();
        FormValidation.clear("#myUserSettingsForm");
        Helpers.generateModalSubtitles("#myUserSettingsModal", {"Username": window.signedinUser.username});
        $('#myUserSettingsUsername').val(window.signedinUser.username);
        $('#myUserSettingsName').val(window.signedinUser.name);
        $('#myUserSettingsEmail').val(window.signedinUser.email);
    });

    $("#myUserSettingsConfirm").click(function(event) {
        $.ajax({
            type: 'POST',
            url : window.routes.Users.edit(),
            headers: { 'Csrf-Token': '@helper.CSRF.getToken.value' },
            data: $('#myUserSettingsForm').serialize(),
            success: function(response) {
                window.signedinUser.name = $('#myUserSettingsModal [name="name"]').val();
                window.signedinUser.email = $('#myUserSettingsModal [name="email"]').val();
                $("#userSidebarName").text(window.signedinUser.name);
                $("#navbarUserName").text(window.signedinUser.name);
                $('#myUserSettingsModal').modal('hide');
                Alerts.success("Your user settings were changed successfully.");
            },
            error: function(err) {
                alerts.warning("Your user settings were not changed.", 5000);
                if (Helpers.isJson(err.responseText)) {
                    FormValidation.show("#myUserSettingsForm", err.responseJSON);
                } else if (err.responseText) {
                    alerts.error(err.responseText);
                } else {
                    alerts.error("Couldn't change user settings");
                }
            }
        });
    });

    $("#changeMyPasswordModal").on('show.bs.modal', function() {
        $("#changeMyPasswordForm")[0].reset();
        FormValidation.clear("#changeMyPasswordForm");
        Helpers.generateModalSubtitles("#changeMyPasswordModal", {"Name": window.signedinUser.name, "Username": window.signedinUser.username});
        $("#changeMyPasswordUsername").val(window.signedinUser.username);
        PasswordVisibilityToggle.setPasswordVisibility(false);
        $('#changeMyPasswordStrengthDescription').html(window.common.userPasswordStrengthDescription
                + ` It must have at least ${window.common.userPasswordMinLength} characters.`);
    });

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

    $("#deleteMyUserModal").on('show.bs.modal', function() {
        $.ajax({
            url: window.routes.Users.signedinUserData,
            success: renderDeleteMyUserModal,
            error: (err) => err.responseText ? Alerts.error(err.responseText) : Alerts.error("Couldn't load user data")
        });
    });

    function renderDeleteMyUserModal(user) {
        $("#deleteMyUserForm")[0].reset();
        FormValidation.clear("#deleteMyUserModal");

        Helpers.generateModalSubtitles("#deleteMyUserModal", {
                "Username": window.signedinUser.username,
                "Name": window.signedinUser.name,
                "Account type": Helpers.getAuthMethodText(window.signedinUser.authMethod)
                }, true);
        $('#deleteMyUserTargetUsername').val(window.signedinUser.username);
        if (window.signedinUser.isOauthGoogle || window.signedinUser.isOidc || window.signedinUser.isOrcid) {
            $("#deleteMyUserUsernameInput").removeClass("d-none");
        } else {
            $("#deleteMyUserPasswordInput").removeClass("d-none");
        }
        $('#deleteMyUserConfirmationText').html(generateDeleteMyUserConfirmationHtml(user));
        if (user.studyList.filter(s => s.userSize === 1).length > 0) {
            $("label[for='deleteMyUserSafetyCheck']").text("Check this box, if you really want to delete your user and the above-listed studies with all their results");
        }
        switch (window.signedinUser.authMethod) {
            case "OAUTH_GOOGLE":
                $('#deleteMyUserUsernameInput label').text(`Confirm by typing your email address (${window.signedinUser.username})`);
                break;
            case "OIDC":
                $('#deleteMyUserUsernameInput label').text(`Confirm by typing your user ID (${window.signedinUser.username})`);
                break;
            case "ORCID":
                $('#deleteMyUserUsernameInput label').text(`Confirm by typing your ORCID ID (${window.signedinUser.username})`);
                break;
            default:
                $('#deleteMyUserPasswordInput label').text(`Confirm with your (${window.signedinUser.username}) password`);
        }
    }

    function generateDeleteMyUserConfirmationHtml(user) {
        let confirmationText = `<p>You are about to delete the user <b>"${window.signedinUser.name}" (${window.signedinUser.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;
    }

    $('#deleteMyUserConfirm').click(function(event) {
        const safetyCheck = $('#deleteMyUserSafetyCheck').prop('checked');
        if (!safetyCheck) {
            alerts.error("Your user can only be deleted if the checkbox is checked.");
            return
        }

        $.ajax({
            url : window.routes.Users.remove(),
            type : 'POST',
            headers: { 'Csrf-Token': '@helper.CSRF.getToken.value' },
            data: $('#deleteMyUserForm').serialize(),
            success : function(result) {
                window.location.href = window.routes.Signin.signin;
            },
            error : function(err) {
                FormValidation.clear("#deleteMyUserModal");
                alerts.warning("Your user was not deleted.", 5000);
                if (Helpers.isJson(err.responseText)) {
                    FormValidation.show("#deleteMyUserModal", err.responseJSON);
                } else if (err.responseText) {
                    alerts.error(err.responseText);
                } else {
                    alerts.error("Couldn't delete user");
                }
            }
        });
    });

    $("#userSidebarSignoutButton").click(function(event) {
        window.location.href = window.routes.Signin.signout;
    });

</script>