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

    <div class="row" style="height: 100%;">
        <div class="col tab user-pane-style" id="userprofile">
            <ul class="nav nav-tabs" role="tablist">
                <li class="nav-item" role="presentation" id="layoutOption">
                    <button class="tablinks tab-button active" id="layout-tab" data-bs-toggle="tab" data-bs-target="#users" type="button" role="tab" aria-controls="users" aria-selected="true">Users</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="tab-separator" type="button" role="tab"><i class="icon-tab-separator"></i></button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="tablinks tab-button" id="data-tab" data-bs-toggle="tab" data-bs-target="#profiles" type="button" role="tab" aria-controls="profiles" aria-selected="false">Profiles</button>
                </li>
                <li class="nav-item" role="presentation" id="layoutOptionSeparator">
                    <button class="tab-separator" type="button" role="tab"><i class="icon-tab-separator"></i></button>
                </li>
            </ul>
            <div class="tab-content user-tab-content" >
                <div class="tab-pane" id="profiles" style="height:100%; width:100%" role="tabpanel" aria-labelledby="profiles-tab">
                    {{ template "profiles" . }}
                </div>
                <div class="tab-pane show active" id="users" style="height:100%;width:100%;" role="tabpanel" aria-labelledby="users-tab">
                    {{ template "users" . }}
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            addWSDBListener();
        });

        function addWSDBListener() {
            const socket = new WebSocket("ws://" + window.location.hostname + ":8080/dsws");
            socket.onopen = function () {
                console.log("Status: Connected\n");
            };
            socket.onmessage = function (event) {
                console.log("UserProfiles - received DB change msg: ", event.data);
                const msg = JSON.parse(event.data);
                switch (msg.table) {
                    case DATABASE_TABLE:
                        handleDatabaseTableChange(msg, () => {
                            location.reload();
                        });
                        break;
                    case USER_PROFILE_TABLE:
                    case USER_TABLE:
                    case PROFILE_TABLE:
                        refreshUsers(msg);
                        refreshUserProfiles();
                        refreshProfilesEditor(msg);
                        refreshProfileUsers();
                        break;
                    case URL_NODE_PROFILE_TABLE:
                        if(msg.operation === INSERT_OP) {
                            refreshProfileTreesAfterInsert();
                        } else if(msg.operation === DELETE_OP) {
                            refreshProfileTreesAfterRemove();
                        }
                        hideDialog("LoadingModal");
                        break;
                }
            };
            socket.onerror = function(event) {
                console.log("Connection Error: " + JSON.stringify(event));
            };
            socket.onclose = function (event) {
                console.log("Socket is closed. Reconnect will be attempted in 1 second. Error Code: " +  event.code + ", Reason: " + event.reason);
                setTimeout(function() {
                    addWSDBListener();
                }, 1000);
            };
        }
    </script>

{{ end }}