{{ define "content" }}
<link href="/static/css/pages/topology.css" rel="stylesheet">
<link href="/static/css/pages/nodes.css" rel="stylesheet">

<script src="/static/js/splitPane.js"></script>
<script src="/static/js/alarmRenderer.js"></script>

<script type="text/javascript" charset="utf-8">
    const enterKeyCode = 13;
    const tielineDataModes = {
        OVERVIEW: "overview",
        USAGE:"usage"
    };

    const sessionKeys = {
        ELEMENT_TYPE: "etype",
        ELEMENT_ID: "eid",
        TIELINE_MODE: "tielineMode",
        SELECTED_LEVEL: "selectedLevel"
    };

    const defaultLogicalEndId = -1;

    // specify the columns
    const tielineColumns = [
        {field: "id", headerName: "ID", suppressMovable: true, minWidth: 60, maxWidth: 60, filter: true},
        {field: "name", suppressMovable: true, editable: false, comparator: naturalSort},
        {field: "fromPortName", headerName: "From Port", suppressMovable: true, minWidth: 150, comparator: naturalSort},
        {field: "toPortName", headerName: "To Port", suppressMovable: true, minWidth: 150, comparator: naturalSort},
        //{field: "description", suppressMovable: true, editable: true, maxWidth: 300},
        {field: "sources", suppressMovable: true, editable: false},
        {field: "destinations", suppressMovable: true, editable: false},
    ];

    // let the grid know which columns and what data to use
    const tielineTable = {
        defaultColDef: {
            flex: 1,
            resizable: true,
            sortable: true,
            filter: true,
        },
        columnDefs: tielineColumns,
        suppressMenuHide: true,
        suppressDragLeaveHidesColumns: true,
        headerHeight: 36,
        rowHeight: 31,
        rowSelection: 'multiple',
        onSelectionChanged: traceTieline,
        getRowId: (node) => { return node.data.id; },
    };

    const pathDetailsColumns = [
        {field: "id", headerName: "ID", filter: true, maxWidth: 50, hide: true},
        {field: "levelId", headerName: "Level ID", filter: true, maxWidth: 100, hide: true},
        {field: "levelName", headerName: "Level", filter: true, width: 150, maxWidth: 300, resizable: true},
        {field: "status", headerName: "Status", filter: true, width: 150, maxWidth: 100, cellRenderer: AlarmRenderer},
        {field: "path", headerName: "Paths", minWidth: 1500, comparator: naturalSort, resizable: true},
    ];

    const pathDetailsTable = {
        defaultColDef: {
            flex: 1,
            resizable: false,
            sortable: true,
            filter: true,
            suppressMovable: true,
            editable: false,
            minWidth: 50,
        },
        columnDefs: pathDetailsColumns,
        headerHeight: 36,
        rowHeight: 31,
        rowSelection: 'single',
        onRowClicked: highlightTopologyLevel,
        getRowId: (node) => { return node.data.id; },
        onGridReady: (event) => { event.api.sizeColumnsToFit(); }
    };

    document.addEventListener('DOMContentLoaded', function () {
        document.getElementById("tielinesGrid").ag_grid = new agGrid.Grid(document.querySelector('#tielinesGrid'), tielineTable);
        getTielineData();

        document.getElementById("pathDetailsGrid").ag_grid = new agGrid.Grid(document.querySelector('#pathDetailsGrid'), pathDetailsTable);
        pathDetailsTable.api.setRowData([]);

        addWSDBListener();

	    let tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
	    tooltipTriggerList.forEach(el => {
		    // Bootstrap's default trigger is 'hover focus', and a click puts
		    // focus on the button — which keeps the tooltip visible until focus moves
		    // elsewhere, stacking on subsequent button clicks. Force 'hover' only so
		    // tooltips dismiss as soon as the cursor leaves.
		    new bootstrap.Tooltip(el, { html: true, trigger: 'hover' });
        });

        initializeSplitPaneBar("verticalHandle", "leftPane", "rightPane", paneDirection.HORIZONTAL);
        initializeSplitPaneBar("horizontalHandle", "topPane", "bottomPane", paneDirection.VERTICAL);

        window.addEventListener("keydown", handleKeyDown);
        window.addEventListener("keyup", handleKeyUp);
    });

    /**
     * This function retrieves the tieline information that is present in the tieline table, NOT from rippaview
     */
    function getTielineInformation () {
        let rowData = [];
        tielineTable.api.forEachNode(function (node) {
            // assigning node.data properties to different types here without copying the data will result in
            // different data types for the actual table which can cause rendering issues later
            let copy = Object.assign({}, node.data);
            copy.sources = (copy.sources) ? copy.sources.split(", ") : [];
            copy.destinations = (copy.destinations) ? copy.destinations.split(", ") : [];
            rowData.push(copy);
        });
        return rowData;
    }

    function checkForLogicalEndInTielines (logicalEndName, logicalEndType, tielineData) {
        let location = "";
        switch(logicalEndType) {
            case TopologyElementTypes.DESTINATION:
                location = "destinations";
                break;
            case TopologyElementTypes.SOURCE:
                location = "sources";
                break;
            default:
                console.warn(arguments.callee.name + " - Unsupported element type: " + logicalEndType);
                return false;
        }

        for (let i = 0; i < tielineData.length; i++) {
            if (tielineData[i][location].includes(logicalEndName)) {
                return true;
            }
        }
        return false;
    }

    function fetchLogicalEndData(url, divId) {
        const supportedIds = {
            SOURCES: "#sources",
            DESTINATIONS: "#destinations"
        };

        let endPointType = defaultLogicalEndId;
        let filterButtonId = "";
        let logicalEndTypeClass = "";
        switch (divId) {
            case supportedIds.DESTINATIONS:
                filterButtonId = "destination-tielineFilter";
                endPointType = TopologyElementTypes.DESTINATION;
                logicalEndTypeClass = "destination";
                break;
            case supportedIds.SOURCES:
                filterButtonId = "source-tielineFilter";
                endPointType = TopologyElementTypes.SOURCE;
                logicalEndTypeClass = "source";
                break;
            default:
                console.warn(arguments.callee.name + " - Unsupported div with ID: " + divId);
                return;
        }

        const divider = '-';
        const filterOutNonTieline = $("#" + filterButtonId).prop('checked');
        const filterButtonTextId = filterButtonId + "-count";
        const selectedElementId = sessionStorage.getItem(sessionKeys.ELEMENT_TYPE) + divider + sessionStorage.getItem(sessionKeys.ELEMENT_ID);

        $.get(url).done((data) => {
            $(divId).empty();
            let total = 0;
            let endPointsUsedInTieline = 0;
            if (data) {
                total = data.length;
                const tielineTableData = getTielineInformation();
                const classesToUse = getEndpointClass();
                const htmlIdPrefix = endPointType + divider;
                for (let i = 0; i < data.length; i++) {
                    const usedInTieline = checkForLogicalEndInTielines(data[i].name, endPointType, tielineTableData);
                    if (usedInTieline) {
                        endPointsUsedInTieline++;
                    }

                    if ((filterOutNonTieline) && (!usedInTieline)) {
                        continue;
                    }
                    let logicalEndUiId = data[i].uiId || 0;
                    let htmlElementId = htmlIdPrefix + logicalEndUiId;
                    let newButton = $('<button>', {
                        id: htmlElementId,
                        dsid: htmlIdPrefix + (data[i].id || 0),
                        class: "btn " + classesToUse.classId + " " + logicalEndTypeClass,
                        onClick: "selectEndpointButtons(" + logicalEndUiId + ", " + endPointType + ");",
                        style: "background-color: var(--button-bg);"
                    });

                    newButton.html(((usedInTieline) ? "<i class='icon-tieline'></i>" : "") + data[i].name);
                    newButton.appendTo(divId);
                    // Reselect the button that may have already been selected
                    if (selectedElementId == htmlElementId) {
                        $("#" + htmlElementId).css("background-color", "var(--selected)");
                    }
                }
            }

            // Fill out the text for the filter button
            if (filterButtonId) {
                const countLabel = "(" + endPointsUsedInTieline + "/" + total + ")";
                $("#" + filterButtonTextId).html(countLabel);
            }
            if ((endPointsUsedInTieline == 0) && (filterOutNonTieline)) {
                // If there are no logical ends being used by tielines, and the filter is on, click the filter button
                // to turn it off as no buttons for the user to see, so at least show the user all logical ends in the system
                $("#" + filterButtonId).click();
            }
            hideDialog("LoadingModal");
        });
    }

    function filterField(fieldId) {
        const filter = $("#" + fieldId).val();
        switch (fieldId) {
            case "destinationsFilter":
                fetchLogicalEndData("/topology/destinations?filter=" + filter, "#destinations");
                break;
            case "sourcesFilter":
                fetchLogicalEndData("/topology/sources?filter=" + filter, "#sources");
                break;
            default:
                console.warn(arguments.callee.name + " - Unsupported field for filtering: " + fieldId);
                return
        }
    }

    function getEndpointClass () {
        return {
            classId: "logical-end-buttons",
            selectedClass: "selected-button"
        };
    }

    function getDestinationUiIdsWithTielines() {
        const selectedDestinationsWithTielines = $('.destination[style*="background-color: var(--selected)"]').has("i.icon-tieline");
        let uiids = [];
        for (let i = 0; i < selectedDestinationsWithTielines.length; i++) {
            const uiid = selectedDestinationsWithTielines[i].getAttribute("id");
            const prefix = TopologyElementTypes.DESTINATION + "-";
            uiids.push(uiid.substring(uiid.indexOf(prefix) + prefix.length));
        }
        return uiids;
    }

    function showReleaseDestinationDialog() {
        const elementType = sessionStorage.getItem(sessionKeys.ELEMENT_TYPE);
        let allDestinationUiIds = sessionStorage.getItem(sessionKeys.ELEMENT_ID);
        allDestinationUiIds = (allDestinationUiIds) ? allDestinationUiIds.split(",") : [];

        if (allDestinationUiIds.length === 0) {
            displayWarningDialog("Please select at least one Destination to release");
            return;
        }

        const destinationUiIdsWithTielines = getDestinationUiIdsWithTielines();

        if (destinationUiIdsWithTielines.length === 0) {
            displayWarningDialog("Please select at least one Destination that is using a Tieline to release");
            return;
        }

        if (elementType == TopologyElementTypes.DESTINATION) {
            const withCount = destinationUiIdsWithTielines.length;
            const withoutCount = allDestinationUiIds.length - withCount;
            let message = "There " + ((withCount > 1) ? "are " + withCount + " Destinations that are using Tielines" : "is 1 Destination that is using a Tieline")  + " and are eligible for release."
            if (withoutCount > 0) {
                message += " with " + ((withoutCount > 1) ? withoutCount + " Destinations that aren't using Tielines." : " 1 Destination that isn't using a Tieline.");
            }
            message += "<br/><br/>Are you sure you want to release the selected Destination" +  ((withCount > 1) ? "s which are using Tielines" : " which is using a Tieline") + "?";
            displayConfirmationDialog(message, "Release", "releaseSelectedDestinations()", "Release Destinations", "icon-white icon-unlock");
        }
    }

    // This function IS used, but it is programmatically set in the showReleaseDestinationDialog function
    function releaseSelectedDestinations() {
        const elementType = sessionStorage.getItem(sessionKeys.ELEMENT_TYPE);
        if (elementType == TopologyElementTypes.DESTINATION) {
            const SelectedDestinationsUsingTielines = getDestinationUiIdsWithTielines();
            if (SelectedDestinationsUsingTielines.length > 0) {
                releaseDestinations(SelectedDestinationsUsingTielines);
            } else {
                displayWarningDialog("Please select at least one Destination to release");
            }
        }
    }

    function releaseDestinations (destinationsIds) {
        if (destinationsIds.length > 0) {
            displayDialog("LoadingModal");
            $.post("/topology/releaseDestinations?ids=" + destinationsIds.join(","))
                .fail((response) => {
                    hideDialog("LoadingModal");
                    displayErrorDialog(JSON.stringify(response));
                });
        } else {
            console.warn(arguments.callee + " - No destination IDs provided to release");
        }
    }

    function traceElement() {
        const elementType = sessionStorage.getItem(sessionKeys.ELEMENT_TYPE);
        let elementId = sessionStorage.getItem(sessionKeys.ELEMENT_ID);
	    elementId = (elementId) ? elementId.split(",")[0] : null;
	    if ((elementType && elementId) && (elementId !== defaultLogicalEndId)) {
            updateGraph(simulationData.urls.tracePath + elementId + "&etype=" + elementType);
        } else {
            selectTielineOverviewButton(sessionStorage.getItem(sessionKeys.TIELINE_MODE));
        }
    }

    /**
     * This function is used and is populated in the fetchLogicalEndData function.  This is called when the
     * Source and/or Destination buttons are selected
     *
     * @param logicalEndUiId The UI ID of the logical end
     * @param endPointType The type of logical end (Source or Destination)
     */
    function selectEndpointButtons(logicalEndUiId, endPointType) {
        const shiftButtonSelected = keyState[keyboardButtons.SHIFT] === true;
        const storedElementType = sessionStorage.getItem(sessionKeys.ELEMENT_TYPE);
        sessionStorage.setItem(sessionKeys.ELEMENT_TYPE, endPointType);
        let currentSelectedItems = sessionStorage.getItem(sessionKeys.ELEMENT_ID);
        currentSelectedItems = (currentSelectedItems) ? currentSelectedItems.split(",") : [];
        const firstItem = (currentSelectedItems.length > 0) ? currentSelectedItems[0] : null;
        const htmlId = endPointType + "-" + logicalEndUiId;
        if (shiftButtonSelected) {
            const newSelectionLocation = currentSelectedItems.indexOf(logicalEndUiId.toString());
            if (newSelectionLocation == -1) { // New selection
                $("#"+ htmlId).css("background-color", "var(--selected)");
                currentSelectedItems.push(logicalEndUiId.toString());
            } else { // Remove Selection
                $("#"+ htmlId).css("background-color", "var(--button-bg)");
                currentSelectedItems.splice(newSelectionLocation, 1);
                if (currentSelectedItems.length == 0) {
                    selectTielineOverviewButton(tielineDataModes.OVERVIEW);
                    return;
                }
            }
            sessionStorage.setItem(sessionKeys.ELEMENT_ID, currentSelectedItems.toString());
            // Refresh the diagram
            if ((firstItem !== currentSelectedItems[0]) || (storedElementType != endPointType)) { // If the first element was removed, trace the new first element
                traceElement();
                refreshPathsTable();
                deselectTielineModeButtons();
            }
        } else {
            unselectAllEndpointButtons();
            if (logicalEndUiId != defaultLogicalEndId) {
                sessionStorage.setItem(sessionKeys.ELEMENT_ID, logicalEndUiId)
                $("#"+ htmlId).css("background-color", "var(--selected)");
                if (firstItem !== logicalEndUiId.toString() || storedElementType !== endPointType.toString()) {
                    traceElement();
                    refreshPathsTable();
                    deselectTielineModeButtons();
                }
            }
        }
    }

    function unselectAllEndpointButtons() {
        const logicalEndClasses = getEndpointClass();
        sessionStorage.removeItem(sessionKeys.ELEMENT_ID);
        sessionStorage.removeItem(sessionKeys.SELECTED_LEVEL);
        $("."+ logicalEndClasses.classId).css("background-color", "var(--button-bg)");
    }

    function refreshPathsTable() {
        let uiid = sessionStorage.getItem(sessionKeys.ELEMENT_ID);
        uiid = (uiid) ? uiid.split(",")[0] : null;
        const eType = sessionStorage.getItem(sessionKeys.ELEMENT_TYPE);
        if (!uiid || !eType) {
            return;
        }

        if (uiid == defaultLogicalEndId) {
            return;
        }

        $.get("/topology/paths/agdata?id=" + uiid + "&etype=" + eType)
            .done((data) => {
                pathDetailsTable.api.setRowData(data);
            })
            .fail((response) => {
                displayErrorDialog("Error getting Path Data: " + JSON.stringify(response));
                pathDetailsTable.api.setRowData([]);
            });
    }

    function getTielineData() {
        $.get('/topology/tielines')
            .done((data) => {
                tielineTable.api.setRowData(data);
                fetchLogicalEndData("/topology/destinations", "#destinations");
                fetchLogicalEndData("/topology/sources", "#sources");
            })
            .fail((response) => {
                displayErrorDialog("Error getting Tieline Data: " + JSON.stringify(response));
                tielineTable.api.setRowData([]);
            });
    }

    /**
     * Returns the subset of currently selected tieline grid rows that are in active use: both
     * `sources` and `destinations` are non-empty, meaning the tieline has live endpoints attached.
     * Used when confirming or performing a release so only in-use tielines are offered or posted to the server.
     *
     * @returns {Array<Object>} Selected row objects that qualify as active; may be empty.
     */
    function getActiveTielines() {
        const selectedRows = tielineTable.api.getSelectedRows();
        let activeTielines = [];
        for (let i = 0; i < selectedRows.length; i++) {
            if (selectedRows[i].sources != "" && selectedRows[i].destinations != "") {
                activeTielines.push(selectedRows[i]);
            }
        }
        return activeTielines;
    }

    function showReleaseTielineDialog() {
        const activeTielines = getActiveTielines();
        if (activeTielines.length > 0) {
            let message = "Are you sure you want to release the " + activeTielines.length + " selected Tieline";
            message += ((activeTielines.length > 1) ? "s that are" : " that is") + " currently being used by the system?";
            const selectedRows = tielineTable.api.getSelectedRows();
            if (selectedRows.length != activeTielines.length) {
                const difference = selectedRows.length - activeTielines.length;
                message += "<br/><br/>Note: This will not release the " + difference + " Tieline";
                message += ((difference > 1) ? "s that are" : " that is") + " not actively being used in the system.";
            }
            displayConfirmationDialog(message, "Release", "releaseSelectedTielines()", "Release Tielines", "icon-white icon-unlock");
        } else {
            displayWarningDialog("Please select at least one Tieline that is actually being used by the system to release");
        }
    }

    // This function IS used but it is programmatically set in the showReleaseTielineDialog function
    function releaseSelectedTielines() {
        const selectedRows = getActiveTielines();  // Only need to release Tielines that are actively being used
        if (selectedRows && selectedRows.length > 0) {
            releaseTielines(selectedRows.map(node => node.id));
        } else {
            displayWarningDialog("Please select at least one Tieline that is actually being used by the system to release");
        }
    }

    function releaseTielines(tielineIds) {
        if (tielineIds.length > 0) {
            displayDialog("LoadingModal");
            $.post("/topology/releaseTielines?ids=" + tielineIds.join(","))
                .fail((response) => {
                    hideDialog("LoadingModal");
                    displayErrorDialog(response);
                })
        } else {
            console.warn(arguments.callee + " - No tieline IDs provided to release");
        }
    }

    function traceTieline() {
        sessionStorage.removeItem(sessionKeys.ELEMENT_ID);
        sessionStorage.removeItem(sessionKeys.SELECTED_LEVEL);
        const selectedRows = tielineTable.api.getSelectedRows();
        if (selectedRows && selectedRows.length > 0) {
            const ids = selectedRows.map(node => node.id);
            sessionStorage.setItem(sessionKeys.ELEMENT_TYPE, TopologyElementTypes.TIELINE);
            sessionStorage.setItem(sessionKeys.ELEMENT_ID, ids[0]); // Can only display the first diagram
            pathDetailsTable.api.setRowData([]);
            traceElement();
            refreshPathsTable();
            deselectTielineModeButtons();
        }
    }

    function addWSDBListener() {
        var socket = new WebSocket("ws://" + window.location.hostname + ":8080/dsws");
        socket.onopen = function () {
            console.log("Status: Connected");
        };

        socket.onmessage = function (event) {
            const msg = JSON.parse(event.data);
            console.log("socket Message Received: " + JSON.stringify(msg, null, 2));
            switch(msg.table) {
                case TIELINE_TABLE:
                case TOPOLOGY_TIELINE:
                    getTielineData();
                    refreshPathsTable();
                    return;
                case LEVEL_TABLE:
                    refreshPathsTable();
                    return;
                case DATABASE_TABLE:
                    selectTielineOverviewButton(tielineDataModes.OVERVIEW, false);
                    return;
                case DEVICE_TABLE:
                    // If there are updated devices, and you are currently viewing the overview buttons, refresh the overview to show the new devices
                    if ((!sessionStorage.getItem(sessionKeys.ELEMENT_ID)) && (msg.operation === INSERT_OP || msg.operation === DELETE_OP))  {
                        selectTielineOverviewButton(sessionStorage.getItem(sessionKeys.TIELINE_MODE), false);
                    }
                    return;
            }
        };

        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);
        };
    }

    function getTielineOverviewIds () {
        return {
            OVERVIEW: "tielineOverview",
            USAGE: "tielineUsage",
            CLASS: "btn-active"
        };
    }

    function deselectTielineModeButtons () {
        const ids = getTielineOverviewIds();
        $("#" + ids.OVERVIEW).removeClass(ids.CLASS);
        $("#" + ids.USAGE).removeClass(ids.CLASS);
    }

    /**
     * Activates the Tieline Overview or Tieline Usage navbar mode: updates button styling,
     * persists the mode in session storage, clears tieline/source/destination/path selections
     * and level highlight state, then reloads the topology graph from the devices URL.
     *
     * @param {string} mode One of `tielineDataModes.OVERVIEW` or `tielineDataModes.USAGE`. Selects
     *        which nav button appears active and drives how tieline capacity is labeled on the map.
     *        Any other value logs a warning and falls back to overview.
     * @param {boolean} [userTriggered=true] Passed to `updateGraph`. If true, device data is fetched
     *        immediately (normal for direct user action). If false, the fetch is debounced by one
     *        second so bursts of programmatic updates (for example from WebSockets) do not hammer the server.
     */
    function selectTielineOverviewButton(mode, userTriggered = true) {
        const ids = getTielineOverviewIds();
        switch (mode) {
            case tielineDataModes.OVERVIEW:
                $("#" + ids.OVERVIEW).addClass(ids.CLASS);
                $("#" + ids.USAGE).removeClass(ids.CLASS);
                break;
            case tielineDataModes.USAGE:
                $("#" + ids.USAGE).addClass(ids.CLASS);
                $("#" + ids.OVERVIEW).removeClass(ids.CLASS);
                break;
            default:
                const defaultMode = tielineDataModes.OVERVIEW;
                console.warn(arguments.callee.name + " - Unsupported Tieline Data Mode: " + mode + ", will use default mode of: " + defaultMode);
                selectTielineOverviewButton(defaultMode);
                return;
        }
        sessionStorage.setItem(sessionKeys.TIELINE_MODE, mode);
        tielineTable.api.deselectAll();
        unselectAllEndpointButtons();
        pathDetailsTable.api.setRowData([]);
        sessionStorage.removeItem(sessionKeys.SELECTED_LEVEL);
        updateGraph(simulationData.urls.devices, userTriggered);
    }

    function highlightTopologyLevel() {
        const selectedRows = pathDetailsTable.api.getSelectedRows();
        const currentSelection = sessionStorage.getItem(sessionKeys.SELECTED_LEVEL);
        if (selectedRows && selectedRows.length > 0) {
            const levelIds = selectedRows.map(node => node.levelId);
            if (levelIds[0] != currentSelection) {
                sessionStorage.setItem(sessionKeys.SELECTED_LEVEL, levelIds[0]);
            } else {
                sessionStorage.removeItem(sessionKeys.SELECTED_LEVEL);
                pathDetailsTable.api.deselectAll();
            }
        }
        traceElement();
    }

    function selectAllTielines() {
        tielineTable.api.selectAllFiltered();
    }

    function deselectAllTielines() {
        tielineTable.api.deselectAll();
    }

    function selectAllDestinations() {
        handleKeyDown({key: keyboardButtons.SHIFT});
        $('.destination[style*="background-color: var(--button-bg)"]').click();
        handleKeyUp({key: keyboardButtons.SHIFT});
    }

    const keyState = {};
    const keyboardButtons = {
        SHIFT: "Shift"
    }

    function handleKeyDown (event) {
        keyState[event.key] = true;
    }

    function handleKeyUp (event) {
        delete keyState[event.key];
    }
</script>

<div class="full-size">
    <div id="topPane" class="vertical-split-pane">
        <div class="splitter">
            <div id="leftPane" class="horizontal-split-pane">
                <nav class="navbar navbar-expand">
                    <div class="container-fluid" id="navbarToggler">
                        <ul class="navbar-nav me-auto">
                            <li>
                                <button id="tielineOverview" onclick="selectTielineOverviewButton(tielineDataModes.OVERVIEW);" class="btn btn-nav-icon" data-toggle="tooltip" data-placement="bottom" title="Tieline Overview">
                                    <i class="icon-btn icon-graph"></i>
                                </button>
                            </li>
                            <li>
                                <button id="tielineUsage" onclick="selectTielineOverviewButton(tielineDataModes.USAGE);" class="btn btn-nav-icon" data-toggle="tooltip" data-placement="bottom" title="Tieline Usage">
                                    <i class="icon-btn icon-tieline-usage"></i>
                                </button>
                            </li>
                        </ul>
                    </div>
                </nav>
                {{ template "topology-map" . }}
            </div>

            <div id="verticalHandle" class="vertical-split-handle">
            </div>

            <div id="rightPane" class="col tab horizontal-split-pane">
                <ul class="nav nav-tabs" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="tablinks tab-button active" id="tielines-tab" data-bs-toggle="tab" data-bs-target="#tielinesTabContent" type="button" role="tab" aria-controls="tielinesTabContent" aria-selected="true">Tielines</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="sources-tab" data-bs-toggle="tab" data-bs-target="#sourcesTabContent" type="button" role="tab" aria-controls="sourcesTabContent">Sources</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="destinations-tab" data-bs-toggle="tab" data-bs-target="#destinationsTabContent" type="button" role="tab" aria-controls="destinationsTabContent">Destinations</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="tab-separator" type="button" role="tab"><i class="icon-tab-separator"></i></button>
                    </li>
                </ul>
                <div class="tab-content dev-list">
                    <div class="tab-pane show active" role="tabpanel" aria-labelledby="tielines-tab" id="tielinesTabContent" style="height:100%;">
                        <nav class="navbar navbar-expand">
                            <div class="container-fluid" id="tielineNavbarToggler">
                                <ul class="navbar-nav me-auto">
                                    <li>
                                        <button onclick="showReleaseTielineDialog();" class="btn btn-nav-icon" data-toggle="tooltip" data-placement="bottom" title="Release Tielines">
                                            <i class="icon-btn icon-unlock"></i>
                                        </button>
                                    </li>
                                    <li>
                                        <button onclick="selectAllTielines();" class="btn btn-nav-icon" data-toggle="tooltip" data-placement="bottom" title="Select All">
                                            <i class="icon-btn icon-select-rows"></i>
                                        </button>
                                    </li>
                                    <li>
                                        <button onclick="deselectAllTielines();" class="btn btn-nav-icon" data-toggle="tooltip" data-placement="bottom" title="Deselect All">
                                            <i class="icon-btn icon-deselect-rows"></i>
                                        </button>
                                    </li>
                                </ul>
                            </div>
                        </nav>
                        <div class="grid-wrapper-tielines">
                            <div id="tielinesGrid" style="height: 100%;" class="ag-theme-balham-dark"></div>
                        </div>
                    </div>

                    <div class="tab-pane" role="tabpanel" aria-labelledby="destinations-tab" id="destinationsTabContent">
                        <nav class="navbar navbar-expand">
                            <div class="container-fluid" id="destinationsNavbarToggler">
                                <ul class="navbar-nav me-auto">
                                    <li>
                                        <button onclick="showReleaseDestinationDialog();" class="btn btn-nav-icon" data-toggle="tooltip" data-placement="bottom" title="Release Destinations">
                                            <i class="icon-btn icon-unlock"></i>
                                        </button>
                                    </li>
                                    <li>
                                        <button onclick="selectAllDestinations();" class="btn btn-nav-icon" data-toggle="tooltip" data-placement="bottom" title="Select All">
                                            <i class="icon-btn icon-select-rows"></i>
                                        </button>
                                    </li>
                                    <li>
                                        <button onclick="unselectAllEndpointButtons();" class="btn btn-nav-icon" data-toggle="tooltip" data-placement="bottom" title="Deselect All">
                                            <i class="icon-btn icon-deselect-rows"></i>
                                        </button>
                                    </li>
                                    <li>
                                        <input type="checkbox" class="btn-check" id="destination-tielineFilter" onclick="filterField('destinationsFilter');" data-toggle="tooltip" data-placement="bottom" title="Show/Hide Tieline Destinations" checked>
                                        <label class="btn btn-nav-icon-text" for="destination-tielineFilter"><i class='icon-tieline'></i><span id="destination-tielineFilter-count"></span></label>
                                    </li>
                                </ul>
                                <form class="d-flex">
                                    <input id="destinationsFilter" class="form-control rounded-0" type="search" placeholder="Filter" aria-label="Filter" onkeydown="return event.keyCode != enterKeyCode;" oninput="filterField(this.id);">
                                    <span><i class="icon-filter"></i></span>
                                </form>
                            </div>
                        </nav>
                        <div class="dev-list btn-dev-list" role="group" id="destinations">
                            <!-- Buttons get filled in with a call to fetchLogicalEndData -->
                        </div>
                    </div>

                    <div class="tab-pane" role="tabpanel" aria-labelledby="sources-tab" id="sourcesTabContent">
                        <nav class="navbar navbar-expand">
                            <div class="container-fluid" id="sourcesNavbarToggler">
                                <ul class="navbar-nav me-auto">
                                    <li>
                                        <input type="checkbox" class="btn-check" id="source-tielineFilter" onclick="filterField('sourcesFilter');" data-toggle="tooltip" data-placement="bottom" title="Show/Hide Tieline Sources" checked>
                                        <label class="btn btn-nav-icon-text" for="source-tielineFilter"><i class='icon-tieline'></i><span id="source-tielineFilter-count"></span></label>
                                    </li>
                                </ul>
                                <form class="d-flex">
                                    <input id="sourcesFilter" class="form-control rounded-0" type="search" placeholder="Filter" aria-label="Filter" onkeydown="return event.keyCode != enterKeyCode;" oninput="filterField(this.id);">
                                    <span><i class="icon-filter"></i></span>
                                </form>
                            </div>
                        </nav>
                        <div class="dev-list btn-dev-list" role="group" id="sources">
                            <!-- Buttons get filled in with a call to fetchLogicalEndData -->
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="horizontalHandle" class="horizontal-split-handle">
    </div>

    <div id="bottomPane" class="vertical-split-pane bottom-pane-size">
        <div class="detailsPane">
            <div class="grid-wrapper full-size">
                <div id="pathDetailsGrid" class="ag-theme-balham-dark full-size"></div>
            </div>
        </div>
    </div>
</div>

{{ end }}