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

    <div class="row" style="height: 100%;">
        <div class="col splitBorder profile-left-pane-style">
            <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="addProfileMenuButton" onclick="showAddProfileModal()"><i class="icon-btn-nav-menu icon-plain icon-add" id="addProfileMenuImg"></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="duplicateProfileMenuButton" onclick="duplicateProfileCheck()"><i class="icon-btn-nav-menu icon-plain icon-duplicate" id="duplicateProfileMenuImg"></i>Duplicate</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="deleteProfileMenuButton" onclick="removeProfileCheck()"><i class="icon-btn-nav-menu icon-plain icon-delete" id="deleteProfileMenuImg"></i>Delete</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="addProfileButton" onclick="showAddProfileModal()" data-toggle="tooltip" data-placement="bottom" title="Add"><i class="icon-btn icon-add" id="addProfileImg"></i></button>
                        </li>
                        <li>
                            <button class="btn btn-nav-icon" id="duplicateProfileButton" onclick="duplicateProfileCheck()" data-toggle="tooltip" data-placement="bottom" title="Duplicate"><i class="icon-btn icon-duplicate" id="duplicateProfileImg"></i></button>
                        </li>
                        <li>
                            <button class="btn btn-nav-icon" id="deleteProfileButton" onclick="removeProfileCheck()" data-toggle="tooltip" data-placement="bottom" title="Delete"><i class="icon-btn icon-delete" id="deleteProfileImg"></i></button>
                        </li>
                    </ul>
                </div>
            </nav>

            <div class="grid-wrapper-profile">
                <div id="profileEditorGrid" style="height: 100%" class="ag-theme-balham-dark"></div>
            </div>
        </div>
        <div class="col profile-right-panel-style">
            <ul class="nav nav-subtabs" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="tablinks subtab-button active" id="profileinfo-tab" data-bs-toggle="tab"
                            data-bs-target="#profileinfo" type="button" role="tab" aria-controls="data"
                            aria-selected="true">Info
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="subtab-separator" type="button" role="tab"><i class="icon-tab-separator"></i>
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="tablinks subtab-button" id="profileconfig-tab" data-bs-toggle="tab"
                            data-bs-target="#profileconfig" type="button" role="tab" aria-controls="Layout"
                            aria-selected="false">Configuration
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="subtab-separator" type="button" role="tab"><i class="icon-tab-separator"></i>
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="tablinks subtab-button" id="profileusers-tab" data-bs-toggle="tab"
                            data-bs-target="#profileusers" type="button" role="tab" aria-controls="Layout"
                            aria-selected="false">Assign users
                    </button>
                </li>
            </ul>
            <div class="tab-content" style="height:100%">
                <div class="tab-pane show active" id="profileinfo" role="tabpanel" aria-labelledby="profileinfo-tab" style="height:100%;width:100%">
                    {{ template "profileinfo" . }}
                </div>
                <div class="tab-pane fade" id="profileconfig" role="tabpanel" aria-labelledby="profileconfig-tab" style="height:100%;width:100%">
                    {{ template "profileconfig" . }}
                </div>
                <div class="tab-pane fade" id="profileusers" role="tabpanel" aria-labelledby="profileusers-tab" style="height:100%;width:100%">
                 <div class="row container-data container-profile-data">
                        <div class="col profile-data-table">
                            <div class="grid-wrapper-panel-logical-ends">
                                <div id="availableUsersGrid" style="height: 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="onAddUsersToProfile()" class="btn btn-assign-icon" id="addUsersToProfileButton"><i class="icon-assign" id="addUsersToProfileImg"></i></button>
                                <button onclick="onRemoveUsersFromProfile()" class="btn btn-assign-icon" id="removeUsersFromProfileButton"><i class="icon-unassign" id="removeUsersFromProfileImg"></i></button>
                                <button onclick="onAddUsersToProfile(true)" class="btn btn-assign-icon" id="addAllUsersToProfileButton" style="margin-top: 60px"><i class="icon-assign-all" id="addAllUsersToProfileImg"></i></button>
                                <button onclick="onRemoveUsersFromProfile(true)" class="btn btn-assign-icon" id="removeAllUsersFromProfileButton"><i class="icon-unassign-all" id="removeAllUsersFromProfileImg"></i></button>
                            </div>
                        </div>
                        <div class="col profile-data-table">
                            <div class="grid-wrapper-panel-logical-ends">
                                <div id="assignedUsersGrid" style="height: 100%;width: 100%" class="ag-theme-balham-dark"></div>
                            </div>
                        </div>
                 </div>
            </div>
            </div>
        </div>
    </div>

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

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

        const assignedColumnDefs = [
            {field: "id", hide: true, maxWidth: 80, getQuickFilterText: () => ''},
            {field: "name", headerName: "Assigned", suppressMovable: true, comparator: naturalSort},
        ]

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

        const profileEditorGridOptions = {
            defaultColDef: defaultProps,
            columnDefs: profilesEditorDefs,
            suppressMenuHide: true,
            suppressDragLeaveHidesColumns: true,
            headerHeight: 36,
            rowHeight: 31,
            rowSelection: 'single',
            onSelectionChanged: onProfileSelectionChanged,
        };

        const availUsersGridOptions = {
            defaultColDef: defaultProps,
            columnDefs: availableColumnDefs,
            suppressMenuHide: true,
            suppressDragLeaveHidesColumns: true,
            headerHeight: 36,
            rowHeight: 31,
            rowSelection: 'multiple',
        };

        const assignedUsersGridOptions = {
            defaultColDef: defaultProps,
            columnDefs: assignedColumnDefs,
            suppressMenuHide: true,
            suppressDragLeaveHidesColumns: true,
            headerHeight: 36,
            rowHeight: 31,
            rowSelection: 'multiple',
        };

        document.addEventListener('DOMContentLoaded', function () {
            const profileGridDiv = document.querySelector('#profileEditorGrid');
            new agGrid.Grid(profileGridDiv, profileEditorGridOptions);
            fetch('/profile/agdata')
                .then((response) => response.json())
                .then((data) => {
                    if(data && data.length != 0) {
                        profileEditorGridOptions.api.setRowData(data);
                        profileEditorGridOptions.api.forEachNode((node) => {if (node.rowIndex == 0) {node.setSelected(true, true);}});
                    }
            });
            const availableUsersGridDiv = document.querySelector('#availableUsersGrid');
            new agGrid.Grid(availableUsersGridDiv, availUsersGridOptions);
            const assignedUsersGridDiv = document.querySelector('#assignedUsersGrid');
            new agGrid.Grid(assignedUsersGridDiv, assignedUsersGridOptions);
            window.addEventListener(DBMODE_TABLE, handleDbModeChange);
        });

        function onProfileSelectionChanged() {
            const selectedRows = profileEditorGridOptions.api.getSelectedRows();
            if (selectedRows.length === 1) {
                sessionStorage.setItem("profileEditId", selectedRows[0].id);
                updateProfileActionStates(selectedRows[0]);
                refreshSelectedProfileInfo();
                refreshProfileUsers();
                refreshAvailableProfileTree(true);
                refreshAssignedProfileTree(true);
            } else {
                sessionStorage.removeItem("profileEditId");
            }
        }

        function isAdminProfile(profileData) {
            return profileData && profileData.id === 1 && profileData.name && profileData.name.toLowerCase() === 'admin';
        }

        function updateProfileActionStates(selectedProfile) {
            const isAdmin = isAdminProfile(selectedProfile);
            const isProfileSelected = selectedProfile != null;
            const isProtect = dbMode === DBMode_Protect;
            const disableAdd = !isProfileSelected || isProtect;
            const disableRestricted = !isProfileSelected || isAdmin || isProtect;
            setButtonIdsDisabled([
                "addProfile",
                "addProfileMenu"
            ], disableAdd);
            setButtonIdsDisabled([
                "duplicateProfile",
                "duplicateProfileMenu",
                "deleteProfile",
                "deleteProfileMenu",
                "addUsersToProfile",
                "removeUsersFromProfile",
                "addAllUsersToProfile",
                "removeAllUsersFromProfile",
                "assignConfig",
                "unassignConfig",
                "profileName"
            ], disableRestricted);
        }

        function refreshSelectedProfileInfo() {
            let profileId = sessionStorage.getItem("profileEditId");
            const profileInfoDiv = $('#profileinfo');

            if (profileId) {
                $.ajax({
                    url: "/profile/info?profileId=" + profileId,
                    success: function (result) {
                        profileInfoDiv.html(result);

                        const selectedProfileData = profileEditorGridOptions.api.getSelectedRows()[0];
                        const profileNameInput = profileInfoDiv.find('#profileName');

                        if (selectedProfileData && isAdminProfile(selectedProfileData)) {
                            profileNameInput.prop('disabled', true).addClass('disabled');
                        } else {
                            profileNameInput.prop('disabled', false).removeClass('disabled');
                        }
                    },
                    error: () => {
                        profileInfoDiv.html('<p class="text-danger">Error loading profile info.</p>');
                    }
                });
            } else {
                profileInfoDiv.html('');
            }
        }

        function refreshProfilesEditor(msg) {
            let firstSelectedAvailableNodeIndex = getFirstSelectedNodeIndex(profileEditorGridOptions);
            fetch('/profile/agdata')
                .then((response) => response.json())
                .then((data) => {
                    profileEditorGridOptions.api.setRowData(data);
                    if (msg.table === PROFILE_TABLE && msg.operation === INSERT_OP) {
                        profileEditorGridOptions.api.forEachNode((node) => {if (node.data.id == msg.rowIds[0]) {node.setSelected(true, true);}});
                    } else {
                        setNodeSelected(profileEditorGridOptions, firstSelectedAvailableNodeIndex);
                    }
            });
        }

        function refreshProfileUsers() {
            let profileId = sessionStorage.getItem("profileEditId");
            const selectedProfileRows = profileEditorGridOptions.api.getSelectedRows();
            if (availUsersGridOptions.api) availUsersGridOptions.api.setRowData([]); else console.warn("availUsersGridOptions.api not ready in refreshProfileUsers");
            if (assignedUsersGridOptions.api) assignedUsersGridOptions.api.setRowData([]); else console.warn("assignedUsersGridOptions.api not ready in refreshProfileUsers");

            const adminUserId = 1;

            if (profileId && selectedProfileRows.length === 1 && isAdminProfile(selectedProfileRows[0])) {
                console.log("refreshProfileUsers - Admin profile selected. Showing only Admin user as assigned, available is empty.");
                fetch('/user/agdata')
                    .then(response => response.json())
                    .then(allUsers => {
                        let adminUser = null;
                        if (allUsers) {
                            adminUser = allUsers.find(user => user.id === adminUserId && user.name.toLowerCase() === 'admin');
                        }

                        if (assignedUsersGridOptions.api) {
                            assignedUsersGridOptions.api.setRowData(adminUser ? [adminUser] : []);
                            assignedUsersGridOptions.api.deselectAll();
                        }
                        if (availUsersGridOptions.api) {
                            availUsersGridOptions.api.setRowData([]);
                            availUsersGridOptions.api.deselectAll();
                        }
                    })
                    .catch(error => {
                        console.error("Error fetching users for Admin profile view:", error);
                        if (assignedUsersGridOptions.api) assignedUsersGridOptions.api.setRowData([]);
                        if (availUsersGridOptions.api) availUsersGridOptions.api.setRowData([]);
                    });

            } else if (profileId) {
                fetch('/profile/availusers?id=' + profileId)
                    .then((response) => response.json())
                    .then((data) => {
                        console.log("refreshProfileUsers - available (raw):", data);
                        const filteredData = data ? data.filter(user => !(user.id === adminUserId && user.name.toLowerCase() === 'admin')) : [];
                        console.log("refreshProfileUsers - available (filtered):", filteredData);

                        if (availUsersGridOptions.api) {
                            availUsersGridOptions.api.setRowData(filteredData);
                            availUsersGridOptions.api.deselectAll();
                        }
                    });
                fetch('/profile/assignedusers?id=' + profileId)
                    .then((response) => response.json())
                    .then((data) => {
                        console.log("refreshProfileUsers - assigned:", data);
                        const assignedData = data || [];

                        if (assignedUsersGridOptions.api) {
                            assignedUsersGridOptions.api.setRowData(assignedData);
                            assignedUsersGridOptions.api.deselectAll();
                        }
                    });
            } else {
                console.log("refreshProfileUsers - No profile selected.");
            }
        }

        function showAddProfileModal() {
            document.getElementById('addProfileName').value = "";
            document.getElementById('addProfileType').value = "0";
            displayDialog("addProfileModal");
        }

        function addProfile() {
            let name = document.getElementById('addProfileName').value;
            name = name.trim();
            if (!validateString(name)) {
                displayErrorDialog(NameErrorMessage);
                return;
            }
            let formatName = encodeURIComponent(name);
            let type = document.getElementById('addProfileType').value;
            $.ajax({
                url: "/profile/add?name=" + formatName + "&type=" + type,
                error: (err) => {
                    displayErrorDialog(err.responseText || JSON.stringify(err));
                }
            });
            hideDialog('addProfileModal');
        }

        function duplicateProfileCheck() {
            let selectedRows = profileEditorGridOptions.api.getSelectedRows();
            if (selectedRows.length === 1) {
                displayDialog('duplicateProfileModal');
            } else {
                displayWarningDialog("Please select an Profile to duplicate.");
            }
        }

        function duplicateProfile() {
            const selectedRows = profileEditorGridOptions.api.getSelectedRows();
            if (selectedRows.length !== 1) {
                hideDialog('duplicateProfileModal'); return;
            }
            const selectedProfile = selectedRows[0];

            if (isAdminProfile(selectedProfile)) {
                displayWarningDialog("The Admin profile cannot be duplicated.");
                hideDialog('duplicateProfileModal');
                return;
            }

            $.ajax({
                url: "/profile/duplicate?id=" + selectedProfile.id,
                success: function() {
                    console.log(`Duplicate request sent for profile ID: ${selectedProfile.id}`);
                },
                error: (err) => {
                    displayErrorDialog(err.responseText || "Error duplicating profile.");
                }
            });
            hideDialog('duplicateProfileModal');
        }

        function removeProfileCheck() {
            let selectedRows = profileEditorGridOptions.api.getSelectedRows();
            if (selectedRows.length === 1) {
                displayDialog('removeProfileModal');
            } else {
                displayWarningDialog("Please select an Profile to delete.");
            }
        }

        function removeProfile() {
            const selectedRows = profileEditorGridOptions.api.getSelectedRows();
            if (selectedRows.length !== 1) {
                hideDialog('removeProfileModal'); return;
            }
            const selectedProfile = selectedRows[0];

            if (isAdminProfile(selectedProfile)) {
                displayWarningDialog("The Admin profile cannot be deleted.");
                hideDialog('removeProfileModal');
                return;
            }

            $.ajax({
                url: "/profile/remove?id=" + selectedProfile.id,
                success: () => {
                    console.log(`Remove request sent for profile ID: ${selectedProfile.id}`);
                },
                error: (err) => {
                    displayErrorDialog(err.responseText || "Error removing profile. It might have assigned users.");
                }
            });
            hideDialog('removeProfileModal');
        }

        function onAddUsersToProfile(all = false) {
            let profileId = sessionStorage.getItem("profileEditId");
            if (!profileId) {
                displayWarningDialog("Please select a profile first.");
                return;
            }

            const selectedProfileRows = profileEditorGridOptions.api.getSelectedRows();
            if (selectedProfileRows.length === 1 && isAdminProfile(selectedProfileRows[0])) {
                displayWarningDialog("User assignment for the Admin profile cannot be changed.");
                return;
            }

            let ids = [];
            let sourceGridApi = availUsersGridOptions.api;
            if (!sourceGridApi) { console.error("Available users grid API not ready"); return; }

            if (all) {
                sourceGridApi.forEachNode((node) => {ids.push(node.data.id)});
                if (ids.length === 0) {
                    displayWarningDialog(`There are no available users to add.`);
                    return;
                }
            } else {
                ids = sourceGridApi.getSelectedRows().map(node => node.id);
                if (ids.length === 0) {
                    displayWarningDialog(`Please select one or more available users to add.`);
                    return;
                }
            }

            const adminUserId = 1;
            const finalIds = ids.filter(id => id !== adminUserId);

            if (finalIds.length === 0 && ids.length > 0) {
                console.warn("Attempted to add users, but only Admin ID found in selection/available list.");
                displayWarningDialog("The Admin user cannot be assigned."); // Inform user
                return;
            }
            if (finalIds.length === 0) {
                return
            }

            $.ajax({
                url: `/profile/addusers?id=${profileId}&all=${all}&ids=${finalIds.join(',')}`,
                success: () => {
                    console.log(`Add users request sent for profile ${profileId}, IDs: ${finalIds.join(',')}`);
                },
                error: (err) => {
                    displayErrorDialog(err.responseText || "Error adding users to profile.");
                }
            });
        }

        function onRemoveUsersFromProfile(all = false) {
            let profileId = sessionStorage.getItem("profileEditId");
            if (!profileId) {
                displayWarningDialog("Please select a profile first.");
                return;
            }

            const selectedProfileRows = profileEditorGridOptions.api.getSelectedRows();
            if (selectedProfileRows.length === 1 && isAdminProfile(selectedProfileRows[0])) {
                displayWarningDialog("User assignment for the Admin profile cannot be changed.");
                return;
            }

            let idsToRemoveInitially = [];
            let sourceGridApi = assignedUsersGridOptions.api;
            if (!sourceGridApi) { console.error("Assigned users grid API not ready"); return; }

            if (all) {
                sourceGridApi.forEachNode((node) => {idsToRemoveInitially.push(node.data.id)});
                if (idsToRemoveInitially.length === 0) {
                    displayWarningDialog("There are no assigned users to remove.");
                    return;
                }
            } else {
                idsToRemoveInitially = sourceGridApi.getSelectedRows().map(node => node.id);
                if (idsToRemoveInitially.length === 0) {
                    displayWarningDialog("Please select one or more assigned users to remove.");
                    return;
                }
            }

            const adminUserId = 1;
            let finalIdsToRemove = idsToRemoveInitially.filter(id => id !== adminUserId);
            let adminWasSelectedOrPresent = idsToRemoveInitially.includes(adminUserId);

            if (adminWasSelectedOrPresent && finalIdsToRemove.length < idsToRemoveInitially.length) {
                displayWarningDialog("The Admin user cannot be removed from profiles. Action will proceed for other selected users (if any).");
            }

            if (finalIdsToRemove.length > 0) {
                console.log("Removing users from profile:", profileId, "Filtered IDs:", finalIdsToRemove);
                $.ajax({
                    url: `/profile/removeusers?id=${profileId}&all=${all}&ids=${finalIdsToRemove.join(',')}`,
                    success: () => {
                        console.log(`Remove users request sent for profile ${profileId}, IDs: ${finalIdsToRemove.join(',')}`);
                    },
                    error: (err) => {
                        displayErrorDialog(err.responseText || "Error removing users from profile.");
                    }
                });
            } else if (adminWasSelectedOrPresent) {
                console.log("Only Admin user was selected/present for removal. No removal request sent.");
            } else if (idsToRemoveInitially.length > 0) {
                console.warn("Attempted to remove users, but no valid IDs found after filtering admin. Initial IDs:", idsToRemoveInitially);
            }
        }

        function handleDbModeChange(eventData) {
            dbMode = eventData.detail.dbMode;
            onProfileSelectionChanged();
            onUserSelectionChanged();
        }

    </script>

    <div class="modal" id="addProfileModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="addProfileModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-max-content-size">
            <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 Profile</span>
                    <span class="btn btn-transparent" onclick="hideDialog('addProfileModal');"><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 col-data-label-60">Name:</td>
                            <td class="col-data-input"><input class="form-control rounded-0 name-size" name="addProfileName" tabindex="0" id="addProfileName"/></td>
                        </tr>
                        <tr class="row-data">
                            <td class="col-data-label col-data-label-60">Type:</td>
                            <td class="col-data-input"><div class="select-wrapper">
                                <select class="custom-select" name="addProfileType" tabindex="1" id="addProfileType" value="0">
                                    <option value="0" selected>User</option>
                                    <option value="1">Group</option>
                                </select>
                            </div></td>
                        </tr>
                    </table>
                    <div class="modal-footer justify-content-between">
                        <button class="btn btn-text btn-outline-secondary" tabindex="3" onclick="hideDialog('addProfileModal');">Cancel</button>
                        <button class="btn btn-text" tabindex="2" onclick="addProfile()">Apply</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal" id="duplicateProfileModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="duplicateProfileModalLabel" 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="duplicateProfileModalLabel"><i class="icon-duplicate icon-white"></i>Confirm Duplicate Profile</span>
                    <span class="btn btn-transparent" onclick="hideDialog('duplicateProfileModal');"><i class="icon-close-header"></i></span>
                </div>
                <div class="modal-body">
                    <p class="container-data">Are you sure you want to duplicate the selected profile?</p>
                </div>
                <div class="modal-footer justify-content-between">
                    <button class="btn btn-text btn-outline-secondary" tabindex="1" onclick="hideDialog('duplicateProfileModal');">Cancel</button>
                    <button class="btn btn-text" tabindex="0" onclick="duplicateProfile()">Apply</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal" id="removeProfileModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="removeProfileModalLabel" 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="removeProfileModalLabel"><i class="icon-delete icon-white"></i>Confirm Delete Profile</span>
                    <span class="btn btn-transparent" onclick="hideDialog('removeProfileModal');"><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 profile?</p>
                </div>
                <div class="modal-footer justify-content-between">
                    <button class="btn btn-text btn-outline-secondary" tabindex="1" onclick="hideDialog('removeProfileModal');">Cancel</button>
                    <button class="btn btn-text" tabindex="0" onclick="removeProfile()">Apply</button>
                </div>
            </div>
        </div>
    </div>

{{ end }}