{{ define "users" }}
<link href="/static/css/pages/user-profile.css" rel="stylesheet">

    <!-- users tab window -->
    <div class="row container-data container-user-data">
        <div class="col user-data-table-left">
            <nav class="navbar navbar-expand">
                <div class="container-fluid" id="navbarToggler">
                    <ul class="navbar-nav me-auto">
                        <li class="nav-item dropdown">
                            <button onclick="" class="btn btn-nav-icon" id="navMenuButton" data-bs-toggle="dropdown" role="button" aria-expanded="false" data-toggle="tooltip" data-placement="bottom" title="Navigation Menu"><i class="icon-btn icon-menu" id="navMenuImage"></i></button>
                            <ul class="dropdown-menu dropdown-menu-nav">
                                <li><hr class="dropdown-item-divider" /></li>
                                <li class="dropdown-item dropdown-item-nav">
                                    <button class="dropdown-item dropdown-item-nav btn-item-text-nav" id="addUserMenuButton" onclick="showAddUserModal()"><i class="icon-btn-nav-menu icon-plain icon-add" id="addUserMenuImg"></i>Add</button>
                                </li>
                                <li><div class="dropdown-item-divider"></div></li>
                                <li class="dropdown-item dropdown-item-nav">
                                    <button class="dropdown-item dropdown-item-nav btn-item-text-nav" id="editUserMenuButton" onclick="showEditUserModal()"><i class="icon-btn-nav-menu icon-plain icon-edit" id="editUserMenuImg"></i>Edit</button>
                                </li>
                                <li><div class="dropdown-item-divider"></div></li>
                                <li class="dropdown-item dropdown-item-nav">
                                    <button class="dropdown-item dropdown-item-nav btn-item-text-nav" id="deleteUserMenuButton" onclick="removeUserCheck()"><i class="icon-btn-nav-menu icon-plain icon-delete" id="deleteUserMenuImg"></i>Delete</button>
                                </li>
                                <li><div class="dropdown-item-divider"></div></li>
                                <li class="dropdown-item dropdown-item-nav">
                                    <button class="dropdown-item dropdown-item-nav btn-item-text-nav" id="clearUserProfileMenuButton" onclick="clearUserProfileCheck()"><i class="icon-btn-nav-menu icon-plain icon-clear" id="clearUserProfileMenuImg"></i>Clear Profile</button>
                                </li>
                                <li><hr class="dropdown-item-divider" /></li>
                            </ul>
                        </li>
                        <li>
                            <span><i class="icon-separator"></i></span>
                        </li>
                        <li>
                            <button class="btn btn-nav-icon" id="addUserButton" onclick="showAddUserModal()" data-toggle="tooltip" data-placement="bottom" title="Add"><i class="icon-btn icon-add" id="addUserImg"></i></button>
                        </li>
                        <li>
                            <button class="btn btn-nav-icon" id="editUserButton" onclick="showEditUserModal()" data-toggle="tooltip" data-placement="bottom" title="Edit"><i class="icon-btn icon-edit" id="editUserImg"></i></button>
                        </li>
                        <li>
                            <button class="btn btn-nav-icon" id="deleteUserButton" onclick="removeUserCheck()" data-toggle="tooltip" data-placement="bottom" title="Delete"><i class="icon-btn icon-delete" id="deleteUserImg"></i></button>
                        </li>
                        <li>
                            <button class="btn btn-nav-icon" id="clearUserProfileButton" onclick="clearUserProfileCheck()" data-toggle="tooltip" data-placement="bottom" title="Clear Profile"><i class="icon-btn icon-clear" id="clearUserProfileImg"></i></button>
                        </li>
                    </ul>
                </div>
            </nav>
            <div class="grid-wrapper-panel-logical-ends">
                <div id="usersGrid" style="height: 100%;width: 100%" class="ag-theme-balham-dark"></div>
            </div>
        </div>
        <div class="row-center data-transfer-center-column">
            <div class="row row-center  shift-down-25">
                <button onclick="assignProfileToUser()" class="btn btn-assign-icon" id="assignProfileButton" style="margin-top: 20px"><i class="icon-unassign" id="assignProfileImg"></i></button>
            </div>
        </div>
        <div class="col user-data-table-right">
            <div class="grid-wrapper-panel-logical-ends">
                <div id="profilesGrid" style="height: 100%;" class="ag-theme-balham-dark"></div>
            </div>
        </div>
    </div>
    <script src="/static/js/keystrokeHandling.js"></script>

    <script type="text/javascript" charset="utf-8">
        const usersColumnDefs = [
            {field: "id", hide: true, maxWidth: 80, getQuickFilterText: () => ''},
            {field: "name", headerName: "User", suppressMovable: true},
            {field: "profileName", headerName: "Assigned Profile", suppressMovable: true},
        ]

        const profilesColumnDefs = [
            {field: "id", hide: true, maxWidth: 80, getQuickFilterText: () => ''},
            {field: "name", headerName: "Available Profiles", suppressMovable: true},
        ]

        const dataDefaultProps = {
            flex: 1,
            resizable: false,
            sortable: true,
            filter: true,
        };

        const usersGridOptions = {
            defaultColDef: dataDefaultProps,
            columnDefs: usersColumnDefs,
            suppressMenuHide: true,
            suppressDragLeaveHidesColumns: true,
            headerHeight: 36,
            rowHeight: 31,
            rowSelection: 'single',
            onSelectionChanged: onUserSelectionChanged,
        };

        const profilesGridOptions = {
            defaultColDef: dataDefaultProps,
            columnDefs: profilesColumnDefs,
            suppressMenuHide: true,
            suppressDragLeaveHidesColumns: true,
            headerHeight: 36,
            rowHeight: 31,
            rowSelection: 'single',
            onSelectionChanged: onUserProfileSelectionChanged,
        };

        let g_userIdForProfileClear = null;

        document.addEventListener('DOMContentLoaded', function () {
            const userGridDiv = document.querySelector('#usersGrid');
            var usersGrid = new agGrid.Grid(userGridDiv, usersGridOptions);
            fetch('/user/agdata')
                .then((response) => response.json())
                .then((data) => {
                    if(data && data.length != 0) {
                        usersGridOptions.api.setRowData(data);
                        usersGridOptions.api.forEachNode((node) => {if (node.rowIndex == 0) {node.setSelected(true, true);}});
                    }
            });
            document.getElementById("usersGrid").ag_grid = usersGrid;
            const profileGridDiv = document.querySelector('#profilesGrid');
            var profilesGrid = new agGrid.Grid(profileGridDiv, profilesGridOptions);
            document.getElementById("profilesGrid").ag_grid = profilesGrid;
        });

        function showAddUserModal() {
            document.getElementById('userName').value = "";
            document.getElementById('pass1').value = "";
            document.getElementById('pass2').value = "";
            displayDialog("addUserModal");
        }

        function showEditUserModal() {
            const selectedRows = usersGridOptions.api.getSelectedRows();
            if (selectedRows.length === 1) {
                const isAdmin = isAdminUser(selectedRows[0]);
                document.getElementById('editUserName').value = selectedRows[0].name;
                document.getElementById('editUserName').disabled = isAdmin;
                document.getElementById('editPass1').value = "";
                document.getElementById('editPass2').value = "";
                displayDialog("editUserModal");
            } else {
                displayWarningDialog("Please select a User to edit.")
            }
        }

        function doCreateUser(name, pass) {
            let form = document.createElement("form");
            let username = document.createElement("input");
            let password = document.createElement("input")
            form.method = "POST";
            form.action = "/user/add";
            username.value=name;
            username.name="name";
            form.appendChild(username);
            password.value=pass;
            password.name="password";
            form.appendChild(password);
            document.body.appendChild(form);
            form.submit();
        }

        function addUser() {
            let name = document.getElementById('userName').value;
            name = name.trim();
            if (!validateUserName(name)) {
                displayErrorDialog(UsernameErrorMessage);
                return;
            }
            let pass1 = document.getElementById('pass1').value;
            let pass2 = document.getElementById('pass2').value;
            if (checkPasswordMatch(pass1, pass2)) {
                if (!validateUserName(pass1)) {
                    displayErrorDialog(UsernameErrorMessage);
                    return;
                }
                doCreateUser(name, pass1);
                hideDialog('addUserModal');
            }
        }

        function editUser() {
            const selectedRows = usersGridOptions.api.getSelectedRows();
            if (selectedRows.length !== 1) {
                displayWarningDialog("Please select a User to edit.");
                return;
            }
            const selectedUser = selectedRows[0];
            const isAdmin = isAdminUser(selectedUser);

            const userId = selectedUser.id;
            let pass1 = document.getElementById('editPass1').value;
            let pass2 = document.getElementById('editPass2').value;

            if (isAdmin) {
                // Name is read-only for admin; only password can be changed.
                if (pass1 === "") {
                    displayWarningDialog("Please enter a new password.");
                    return;
                }
                if (!checkPasswordMatch(pass1, pass2)) {
                    return;
                }
                // Confirm via the app's standard modal rather than relying on
                // the browser's native password-manager prompt (UR-16082).
                pendingAdminPasswordChange = { userId: userId, password: pass1 };
                hideDialog('editUserModal');
                displayConfirmationDialog(
                    selectedUser.name,
                    'Update',
                    'confirmAdminPasswordChange()',
                    'Update password?',
                    'icon-alarm-info-header',
                    'No, thanks'
                );
                return;
            }

            let nameInput = document.getElementById('editUserName');
            let name = nameInput.value.trim();

            if (!validateString(name)) {
                displayErrorDialog(NameErrorMessage);
                nameInput.value = selectedUser.name;
                return;
            }

            let formatName = encodeURIComponent(name);

            if (checkPasswordMatch(pass1, pass2)) {
                let url = `/user/edit?userId=${userId}&name=${formatName}`;
                if (pass1 !== "") {
                    url += `&password=${encodeURIComponent(pass1)}`;
                }
                $.ajax({
                    url: url,
                    success: () => {
                        console.log(`Edit request sent for user ID: ${userId}`);
                    },
                    error: (err) => {
                        displayErrorDialog(err.responseText || `Error editing user ${userId}.`);
                    }
                });
                hideDialog('editUserModal');
            }
        }

        let pendingAdminPasswordChange = null;

        function confirmAdminPasswordChange() {
            if (!pendingAdminPasswordChange) { return; }
            const { userId, password } = pendingAdminPasswordChange;
            pendingAdminPasswordChange = null;
            $.ajax({
                url: `/user/edit?userId=${userId}&password=${encodeURIComponent(password)}`,
                success: () => { console.log(`Edit request sent for user ID: ${userId}`); },
                error: (err) => { showError(err.responseText || `Error editing user ${userId}.`); }
            });
        }

        function checkPasswordMatch(pass1, pass2) {
            if(pass1 !== pass2) {
                displayWarningDialog("password mismatch.");
                return false;
            }
            return true;
        }

        function removeUserCheck() {
            let selectedRows = usersGridOptions.api.getSelectedRows();
            if (selectedRows.length === 1) {
                // Prevent deletion of Admin user
                if (isAdminUser(selectedRows[0])) {
                    displayWarningDialog("The Admin user cannot be deleted.");
                    return;
                }
                displayDialog('removeUserModal');
            } else {
                displayWarningDialog("Please select an User to delete.");
            }
        }

        function removeSelectedUsers() {
            let selectedRows = usersGridOptions.api.getSelectedRows();
            let allIds = selectedRows.map(node => node.id);
            const adminUserId = 1;

            let idsToRemove = allIds.filter(id => id !== adminUserId);
            let adminWasSelected = allIds.includes(adminUserId);

            if (adminWasSelected && idsToRemove.length !== allIds.length) {
                displayWarningDialog("The Admin user cannot be deleted. Other selected users (if any) will be removed.");
            } else if (adminWasSelected && idsToRemove.length === 0) {
                displayWarningDialog("The Admin user cannot be deleted.");
                hideDialog('removeUserModal');
                return;
            }

            if (idsToRemove.length > 0) {
                console.log("removeRows - filtered ids being sent: ", idsToRemove);
                $.ajax({
                    url: "/user/remove?ids=" + idsToRemove.join(','),
                    success: () => {
                        console.log("User removal request successful for IDs:", idsToRemove);
                    },
                    error: (err) => {
                        displayErrorDialog(err.responseText || "Error removing users.");
                    }
                });
            } else {
                console.log("No non-admin users selected for removal.");
            }
            hideDialog('removeUserModal');
        }

        function clearUserProfileCheck() {
            const selectedRows = usersGridOptions.api.getSelectedRows();

            if (selectedRows.length !== 1) {
                displayWarningDialog("Please select a User to clear their profile.");
                return;
            }

            const selectedUser = selectedRows[0];

            if (isAdminUser(selectedUser)) {
                displayWarningDialog("The Admin user's profile cannot be cleared.");
                return;
            }

            g_userIdForProfileClear = selectedUser.id;

            displayDialog('confirmClearUserProfileDialog');
        }

        function doClearSelectedUserProfile() {
            if (g_userIdForProfileClear !== null) {
                console.log("doClearSelectedUserProfile - AJAX call for id: ", g_userIdForProfileClear);
                $.ajax({
                    url: "/user/clearprofile?ids=" + g_userIdForProfileClear,
                    success: () => {
                        console.log("Clear profile request successful for ID:", g_userIdForProfileClear);
                    },
                    error: (err) => {
                        displayErrorDialog(err.responseText || "Error clearing user profile.");
                    }
                });
            }

            hideDialog('confirmClearUserProfileDialog');
            g_userIdForProfileClear = null;
        }

        function onUserSelectionChanged() {
            const selectedRows = usersGridOptions.api.getSelectedRows();
            if (selectedRows.length === 1) {
                console.log("selectedRow: " + selectedRows[0]);
                sessionStorage.setItem("userId", selectedRows[0].id);
                updateUserActionStates(selectedRows[0]);
                refreshUserProfiles();
            } else {
                sessionStorage.removeItem("userId");
            }
        }

        function onUserProfileSelectionChanged() {
            const selectedRows = profilesGridOptions.api.getSelectedRows();
            if (selectedRows.length === 1) {
                sessionStorage.setItem("profileId", selectedRows[0].id);
            } else {
                sessionStorage.removeItem("profileId");
            }
        }

        function assignProfileToUser() {
            let userId = sessionStorage.getItem("userId");
            let profileId = sessionStorage.getItem("profileId");

            if (!userId) {
                displayWarningDialog("Please select a User to assign a Profile to.");
                return;
            }

            const selectedUserRows = usersGridOptions.api.getSelectedRows();
            if (selectedUserRows.length === 1 && isAdminUser(selectedUserRows[0])) {
                displayWarningDialog("The Admin user's profile cannot be changed.");
                return;
            }

            if (!profileId) {
                displayWarningDialog("Please select an available profile to assign.");
                return;
            }

            $.ajax({
                url: "/user/updateprofile?userId="+ userId +"&profileId="+ profileId,
                success: () => {
                    console.log(`Assign profile request sent for user ${userId} to profile ${profileId}`);
                },
                error: (err) => {
                    displayErrorDialog(err.responseText || "Error assigning profile to user.");
                }
            });
        }

        function refreshUsers(msg) {
            let firstSelectedAvailableNodeIndex = getFirstSelectedNodeIndex(usersGridOptions);
            fetch('/user/agdata')
                .then((response) => response.json())
                .then((data) => {
                    usersGridOptions.api.setRowData(data);
                    if (msg.table === USER_TABLE && msg.operation === INSERT_OP) {
                        usersGridOptions.api.forEachNode((node) => {if (node.data.id == msg.rowId) {node.setSelected(true, true);}});
                    } else {
                        setNodeSelected(usersGridOptions, firstSelectedAvailableNodeIndex);
                    }
                });
        }

        function refreshUserProfiles() {
            let firstSelectedAvailableNodeIndex = getFirstSelectedNodeIndex(profilesGridOptions);
            let userId = sessionStorage.getItem("userId");
            const selectedUserRows = usersGridOptions.api.getSelectedRows();

            if (selectedUserRows.length === 1 && isAdminUser(selectedUserRows[0])) {
                console.log("refreshUserProfiles - Admin user selected, clearing available profiles grid.");
                profilesGridOptions.api.setRowData([]);
                sessionStorage.removeItem("profileId");
            } else if (userId) {
                fetch('/user/availprofiles?userId=' + userId)
                    .then((response) => response.json())
                    .then((data) => {
                        console.log("refreshAvailableUserProfiles - received:", data);
                        profilesGridOptions.api.setRowData(data);
                        if (data && data.length > 0) {
                            setNodeSelected(profilesGridOptions, firstSelectedAvailableNodeIndex);
                        } else {
                            sessionStorage.removeItem("profileId");
                        }
                    });
            } else {
                profilesGridOptions.api.setRowData([]);
                sessionStorage.removeItem("profileId");
            }
        }

        function isAdminUser(userData) {
            if (!userData) {
                return false;
            }

            const isPotentialAdminById = (userData.id === 1);
            const isPotentialAdminByName = (userData.name && userData.name.toLowerCase() === 'admin');

            if (isPotentialAdminById && isPotentialAdminByName) {
                return true;
            }

            if (isPotentialAdminById && !isPotentialAdminByName) {
                console.warn(`User with ID 1 has an unexpected name: "${userData.name}". Treating as NOT the protected Admin.`);
            } else if (!isPotentialAdminById && isPotentialAdminByName) {
                console.warn(`User named "admin" found, but has an unexpected ID: ${userData.id}. Treating as NOT the protected Admin.`);
            }
            return false;
        }

        function updateUserActionStates(selectedUser) {
            const isAdmin = isAdminUser(selectedUser);
            const isUserSelected = selectedUser != null;
            const disableDeleteClear = !isUserSelected || isAdmin;
            const dbModeProtect = dbMode === DBMode_Protect;

            setButtonIdsDisabled(["addUser", "addUserMenu"], dbModeProtect);
            setButtonIdsDisabled(["editUser", "editUserMenu"], dbModeProtect || !isUserSelected);
            setButtonIdsDisabled(["deleteUser", "clearUserProfile", "deleteUserMenu", "clearUserProfileMenu"], dbModeProtect || disableDeleteClear)
            if (document.getElementById("assignProfileButton")) {
                setButtonIdsDisabled(["assignProfile"], dbModeProtect || !isUserSelected || isAdmin)
            }
        }

        function setButtonIdsDisabled(buttonIdPrefixes, disabled) {
            buttonIdPrefixes.forEach(function(prefix) {
                setButtonIdDisabled(prefix, disabled);
            });
        }

        function setButtonIdDisabled(buttonIdPrefix, disabled) {
            const button = document.getElementById(buttonIdPrefix + "Button");
            const menuButton = document.getElementById(buttonIdPrefix + "MenuButton");
            const img = document.getElementById(buttonIdPrefix + "Img");
            const menuImg = document.getElementById(buttonIdPrefix + "MenuImg");

            if (button) {
                button.disabled = disabled;
            }
            if (menuButton) {
                menuButton.disabled = disabled;
            }

            if (img) {
                updateIconClass(img, buttonIdPrefix, disabled);
            }
            if (menuImg) {
                updateIconClass(menuImg, buttonIdPrefix, disabled);
            }
        }

        function updateIconClass(iconElement, iconType, disabled) {
            const iconMap = {
                'addUser': 'add',
                'editUser': 'edit',
                'deleteUser': 'delete',
                'clearUserProfile': 'clear',
                'assignProfile': 'unassign',
                "addProfile": "add",
                "duplicateProfile": "duplicate",
                "deleteProfile": "delete",
                "addUsersToProfile": "assign",
                "removeUsersFromProfile": "unassign",
                "addAllUsersToProfile": "assign-all",
                "removeAllUsersFromProfile": "unassign-all",
                "assignConfig": "assign",
                "unassignConfig":"unassign"
            };

            const baseIcon = iconMap[iconType] || iconType;
            const enabledClass = `icon-${baseIcon}`;
            const disabledClass = `icon-${baseIcon}-disabled`;

            iconElement.className = iconElement.className.replace(enabledClass, '').replace(disabledClass, '');
            iconElement.className += disabled ? ` ${disabledClass}` : ` ${enabledClass}`;
        }

    </script>

    <div class="modal" id="addUserModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="addUserModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-add-users">
            <div class="modal-content">
                <div class="modal-header justify-content-between">
                    <span class="modal-title" id="addUserModalLabel"><i class="icon-add icon-white"></i>Add User</span>
                    <span class="btn btn-transparent" onclick="hideDialog('addUserModal');"><i class="icon-close-header"></i></span>
                </div>
                <div class="modal-body">
                    <table class="container-data">
                        <tr class="row-data">
                            <td class="col-data-label">Name:</td>
                            <td class="col-data-input"><input class="form-control rounded-0 name-size" name="userName" id="userName" tabindex="0"/></td>
                        </tr>
                        <tr class="row-data">
                            <td class="col-data-label">Password:</td>
                            <td class="col-data-input"><input type="password" class="form-control rounded-0 name-size" name="pass1" id="pass1" tabindex="1" required/></td>
                        </tr>
                        <tr class="row-data">
                            <td class="col-data-label">Retype Password:</td>
                            <td class="col-data-input"><input type="password" class="form-control rounded-0 name-size" name="pass2" id="pass2" tabindex="2" required/></td>
                        </tr>
                    </table>
                    <div class="modal-footer justify-content-between">
                        <button class="btn btn-text btn-outline-secondary" tabindex="4" onclick="hideDialog('addUserModal');">Cancel</button>
                        <button class="btn btn-text" tabindex="3" onclick="addUser()">Apply</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal" id="editUserModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="editUserModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header justify-content-between">
                    <span class="modal-title" id="editUserModalLabel"><i class="icon-edit icon-white"></i>Edit User</span>
                    <span class="btn btn-transparent" onclick="hideDialog('editUserModal');"><i class="icon-close-header"></i></span>
                </div>
                <div class="modal-body">
                    <table class="container-data">
                        <tr class="row-data">
                            <td class="col-data-label-rename">Name:</td>
                            <td class="col-data-input"><input class="form-control rounded-0 name-size" name="editUserName" id="editUserName" tabindex="0"/></td>
                        </tr>
                        <tr class="row-data">
                            <td class="col-data-label-rename">New Password:</td>
                            <td class="col-data-input"><input type="password" class="form-control rounded-0 name-size" name="editPass1" tabindex="1" id="editPass1" required/></td>
                        </tr>
                        <tr class="row-data">
                            <td class="col-data-label-rename">Retype New Password:</td>
                            <td class="col-data-input"><input type="password" class="form-control rounded-0 name-size" name="editPass2" tabindex="2" id="editPass2" required/></td>
                        </tr>
                    </table>
                    <div class="modal-footer justify-content-between">
                        <button class="btn btn-text btn-outline-secondary" tabindex="4" onclick="hideDialog('editUserModal');">Cancel</button>
                        <button class="btn btn-text" tabindex="3" onclick="editUser()">Apply</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal" id="removeUserModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="removeUserModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-max-content-size">
            <div class="modal-content">
                <div class="modal-header info-header justify-content-between">
                    <span class="modal-title" id="removeUserModalLabel"><i class="icon-delete icon-white"></i>Confirm Delete User</span>
                    <span class="btn btn-transparent" onclick="hideDialog('removeUserModal');"><i class="icon-close-header"></i></span>
                </div>
                <div class="modal-body">
                    <p class="container-data">Are you sure you want to remove the selected user?</p>
                </div>
                <div class="modal-footer justify-content-between">
                    <button class="btn btn-text btn-outline-secondary" tabindex="1" onclick="hideDialog('removeUserModal');">Cancel</button>
                    <button class="btn btn-text" tabindex="0" onclick="removeSelectedUsers()">Apply</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal" id="confirmClearUserProfileDialog" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="confirmClearProfileModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-max-content-size">
            <div class="modal-content">
                <div class="modal-header info-header justify-content-between">
                    <span class="modal-title" id="confirmClearProfileModalLabel"><i class="icon-clear icon-white"></i>Confirm Clear User Profile</span>
                    <span class="btn btn-transparent" onclick="hideDialog('confirmClearUserProfileDialog');"><i class="icon-close-header"></i></span>
                </div>
                <div class="modal-body">
                    <p class="container-data">Clearing the profile for this user will remove all access to the system.  You will need to either delete the user or assign another profile.  Are you sure you want to continue?</p>
                </div>
                <div class="modal-footer justify-content-between">
                    <button class="btn btn-text btn-outline-secondary" tabindex="1" onclick="hideDialog('confirmClearUserProfileDialog');">Cancel</button>
                    <button class="btn btn-text" tabindex="0" onclick="doClearSelectedUserProfile()">Clear</button>
                </div>
            </div>
        </div>
    </div>

{{ end }}