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

<div class="row salvo-page-style" id="salvoPage">
    <div class="salvo-main splitBorder">
        <nav class="navbar navbar-expand">
            <div class="container-fluid">
                <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" onclick="addSalvoRowsCheck()" id="addSalvoMenuButton"><i class="icon-btn-nav-menu icon-plain icon-add" id="addSalvoMenuImg"></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" onclick="duplicateSalvoRowsCheck()" id="duplicateSalvoMenuButton" disabled><i class="icon-btn-nav-menu icon-plain icon-duplicate-disabled" id="duplicateSalvoMenuImg"></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" onclick="removeSalvoRowsCheck()" id="removeSalvoMenuButton" disabled><i class="icon-btn-nav-menu icon-plain icon-delete-disabled" id="removeSalvoMenuImg"></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" onclick="addSalvoRowsCheck()" id="addSalvoButton" data-toggle="tooltip" data-placement="bottom" title="Add"><i class="icon-btn icon-add" id="addSalvoImg"></i></button>
                    </li>
                    <li>
                        <button class="btn btn-nav-icon" onclick="duplicateSalvoRowsCheck()" id="duplicateSalvoButton" data-toggle="tooltip" data-placement="bottom" title="Duplicate" disabled><i class="icon-btn icon-duplicate-disabled" id="duplicateSalvoImg"></i></button>
                    </li>
                    <li>
                        <button class="btn btn-nav-icon" onclick="removeSalvoRowsCheck()" id="removeSalvoButton" data-toggle="tooltip" data-placement="bottom" title="Delete" disabled><i class="icon-btn icon-delete-disabled" id="removeSalvoImg"></i></button>
                    </li>
                </ul>
            </div>
        </nav>
        <div class="grid-wrapper-salvo" id="salvosTable">
            <div id="salvosGrid" style="height: 100%;" class="ag-theme-balham-dark"></div>
        </div>
    </div>

    <div class="salvo-mappings">
        <nav class="navbar navbar-expand">
            <div class="container-fluid">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item dropdown">
                        <button onclick="" class="btn btn-nav-icon" id="navMatrixMenuButton" 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="navMatrixMenuImage"></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="selAllDestsMenuButton" onclick="handleSelectAllDest()" value="false"><i class="icon-btn-nav-menu icon-plain icon-select-rows" id="selAllDestsMenuImg"></i>Select all Destinations</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="deselectAllDestsMenuButton" onclick="handleDeselectAllDest()" value="false" disabled><i class="icon-btn-nav-menu icon-plain icon-deselect-rows-disabled" id="deselectAllDestsMenuImg"></i>Deselect all Destinations</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="captureStatusMenuButton"><i class="icon-btn-nav-menu icon-plain icon-capture" id="captureStatusMenuImg"></i>Capture Status</button>
                                    <ul class="dropdown-menu dropdown-menu-nav dropdown-submenu">
                                    <li class="dropdown-item dropdown-item-nav">
                                        <button class="dropdown-item dropdown-item-nav btn-item-text-nav" id="captureSystemStatusMenuButton" onclick="handleCaptureCheck()"><i class="icon-btn-nav-menu icon-plain icon-capture" id="captureSystemStatusMenuImg"></i>Capture System status</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="captureDestStatusMenuButton" onclick="handleCaptureCheck('dest')" disabled><i class="icon-btn-nav-menu icon-plain icon-capture-disabled" id="captureDestStatusMenuImg"></i>Capture Destination Status</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="capturePipStatusMenuButton" onclick="handleCaptureCheck('portType')"><i class="icon-btn-nav-menu icon-plain icon-capture" id="capturePipStatusMenuImg"></i>Capture Port Status</button>
                                    </li>
                                </ul>
                            </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="clearPresetsMenuButton"><i class="icon-btn-nav-menu icon-plain icon-clear" id="clearPresetsMenuImg"></i>Clear Presets</button>
                                <ul class="dropdown-menu dropdown-menu-nav dropdown-submenu">
                                    <li class="dropdown-item dropdown-item-nav">
                                        <button class="dropdown-item dropdown-item-nav btn-item-text-nav" id="clearAllPresetsMenuButton" onclick="displayConfirmationDialog('Are you sure you would like to clear all presets?', 'Apply', 'handleClearPresets(`all`);', 'Confirm Clear Presets', 'icon-clear icon-white')" disabled><i class="icon-btn-nav-menu icon-plain icon-clear-disabled" id="clearAllPresetsMenuImg"></i>Clear all Presets</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="clearDestPresetsMenuButton" onclick="displayConfirmationDialog('Are you sure you would like to clear all presets on selected destinations?', 'Apply', 'handleClearPresets(`dest`);', 'Confirm Clear Presets', 'icon-clear icon-white')" disabled><i class="icon-btn-nav-menu icon-plain icon-clear-disabled" id="clearDestPresetsMenuImg"></i>Clear Presets for Selected Destinations</button>
                                    </li>
                                </ul>
                            </li>
                            <li><div class="dropdown-section-divider"></div></li>
                            <li class="dropdown-item dropdown-item-nav">
                                <button class="dropdown-item dropdown-item-nav btn-item-text-nav" id="showLevels" data-bs-toggle="modal" data-bs-target="#showLevelModal"><i class="icon-btn-nav-menu icon-plain icon-levels"></i>Levels</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" onclick="toggleView()" disabled><i class="icon-btn-nav-menu icon-plain icon-view-disabled" id="viewMenuImg"></i>View</button>
                            </li>
                            <li><div class="dropdown-item-divider"></div></li>
                            <li class="dropdown-item dropdown-item-nav">
                                <button onclick="toggleFindDrawer();" class="dropdown-item dropdown-item-nav btn-item-text-nav" id="findMenuButton" ><i class="icon-btn-nav-menu icon-plain icon-find-and-filter" id="findMenuImg"></i>Find & Filter</button>
                            </li>
                            <li><div class="dropdown-section-divider"></div></li>
                            <li class="dropdown-item dropdown-item-nav">
                                <button class="dropdown-item dropdown-item-nav btn-item-text-nav" id="diagViewMenuButton" onclick="handleAutoMap(autoMapTypes.DIAGONAL_VIEW)"><i class="icon-btn-nav-menu icon-plain icon-preset-diagonal-current-view" id="diagViewMenuImg"></i>Diagonal preset current view</button>
                            </li>
                            <li class="dropdown-item dropdown-item-nav">
                                <button class="dropdown-item dropdown-item-nav btn-item-text-nav" id="diagMenuButton" onclick="handleAutoMap(autoMapTypes.DIAGONAL)"><i class="icon-btn-nav-menu icon-plain icon-preset-diagonal" id="diagMenuImg"></i>Diagonal preset</button>
                            </li>
                            <li class="dropdown-item dropdown-item-nav">
                                <button class="dropdown-item dropdown-item-nav btn-item-text-nav" id="revDiagViewMenuButton" onclick="handleAutoMap(autoMapTypes.REVERSE_DIAGONAL_VIEW)"><i class="icon-btn-nav-menu icon-plain icon-preset-reversed-diagonal-current-view" id="revDiagViewMenuImg"></i>Reverse diagonal preset current view</button>
                            </li>
                            <li class="dropdown-item dropdown-item-nav">
                                <button class="dropdown-item dropdown-item-nav btn-item-text-nav" id="revDiagMenuButton"onclick="handleAutoMap(autoMapTypes.REVERSE_DIAGONAL)"><i class="icon-btn-nav-menu icon-plain icon-preset-reversed-diagonal" id="revDiagMenuImg"></i>Reverse diagonal preset</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="selAllDestsButton" onclick="handleSelectAllDest();" value="false" data-toggle="tooltip" data-placement="bottom" title="Select all Destinations"><i class="icon-btn icon-select-rows" id="selAllDestsImg"></i></button>
                    </li>
                    <li>
                        <button class="btn btn-nav-icon" id="deselectAllDestsButton" onclick="handleDeselectAllDest();" value="false" data-toggle="tooltip" data-placement="bottom" title="Deselect all Destinations" disabled><i class="icon-btn icon-deselect-rows-disabled" id="deselectAllDestsImg"></i></button>
                    </li>
                    <li class="nav-item dropdown">
                        <button class="btn btn-nav-icon" data-bs-toggle="dropdown" type="button" id="captureStatusButton" aria-expanded="false" data-toggle="tooltip" data-placement="bottom" title="Capture Status"><i class="icon-btn icon-capture" id="captureStatusImg"></i></button>
                        <ul class="dropdown-menu">
                            <li class="dropdown-item" >
                                <button class="dropdown-item btn-item-text-nav" id="captureSystemStatusButton" onclick="handleCaptureCheck()">Capture System Status</button>
                            </li>
                            <li><hr class="dropdown-item-divider" /></li>
                            <li class="dropdown-item" >
                                <button class="dropdown-item btn-item-text-nav" id="captureDestStatusButton" onclick="handleCaptureCheck('dest')" disabled>Capture Destination Status</button>
                            </li>
                            <li><hr class="dropdown-item-divider" /></li>
                            <li class="dropdown-item" >
                                <button class="dropdown-item btn-item-text-nav" id="capturePipStatusButton" onclick="handleCaptureCheck('portType')">Capture Port Status</button>
                            </li>
                        </ul>
                    </li>
                    <li class="nav-item dropdown">
                        <button class="btn btn-nav-icon" data-bs-toggle="dropdown" type="button" id="clearPresetsButton" aria-expanded="false" data-toggle="tooltip" data-placement="bottom" title="Clear Presets"><i class="icon-btn icon-clear" id="clearPresetsImg"></i></button>
                         <ul class="dropdown-menu">
                            <li class="dropdown-item" >
                                <button class="dropdown-item btn-item-text-nav" id="clearAllPresetsButton" onclick="displayConfirmationDialog('Are you sure you would like to clear all presets?', 'Apply', 'handleClearPresets(`all`);', 'Confirm Clear Mappings', 'icon-clear icon-white')" disabled>Clear all Presets</button>
                            </li>
                            <li><hr class="dropdown-item-divider" /></li>
                            <li class="dropdown-item" >
                                <button class="dropdown-item btn-item-text-nav" id="clearDestPresetsButton" onclick="displayConfirmationDialog('Are you sure you would like to clear all presets on selected destinations?', 'Apply', 'handleClearPresets(`dest`);', 'Confirm Clear Mappings', 'icon-clear icon-white')" disabled>Clear Presets for Selected Destinations</button>
                            </li>
                         </ul>
                    </li>
                    <li>
                        <span><i class="icon-separator"></i></span>
                    </li>
                    <li>
                        <span class="btn btn-nav-icon" data-bs-toggle="modal" data-bs-target="#showLevelModal" data-toggle="tooltip" data-placement="bottom" title="Levels"><i class="icon-btn icon-levels"></i></span>
                    </li>
                    <li>
                        <button class="btn btn-nav-icon" id="viewButton" onclick="toggleView()" data-toggle="tooltip" data-placement="bottom" title="View" disabled><i class="icon-btn icon-view-disabled" id="viewImg"></i></button>
                    </li>
                    <li>
                        <span><i class="icon-separator"></i></span>
                    </li>
                    <li>
                        <button onclick="toggleFindDrawer();" class="btn btn-nav-icon" id="findButton" data-toggle="tooltip" data-placement="bottom" title="Find & Filter"><i class="icon-btn icon-find-and-filter" id="findImg"></i></button>
                    </li>
                    <li>
                        <button onclick="handleAutoMap(autoMapTypes.DIAGONAL_VIEW);" class="btn btn-nav-icon" id="diagViewButton" data-toggle="tooltip" data-placement="bottom" title="Diagonal preset current view"><i class="icon-btn icon-preset-diagonal-current-view" id="diagViewImg"></i></button>
                    </li>
                    <li>
                        <button onclick="handleAutoMap(autoMapTypes.DIAGONAL);" class="btn btn-nav-icon" id="diagButton" data-toggle="tooltip" data-placement="bottom" title="Diagonal preset"><i class="icon-btn icon-preset-diagonal" id="diagImg"></i></button>
                    </li>
                    <li>
                        <button onclick="handleAutoMap(autoMapTypes.REVERSE_DIAGONAL_VIEW);" class="btn btn-nav-icon" id="revDiagViewButton" data-toggle="tooltip" data-placement="bottom" title="Reverse diagonal preset current view"><i class="icon-btn icon-preset-reversed-diagonal-current-view" id="revDiagViewImg"></i></button>
                    </li>
                    <li>
                        <button onclick="handleAutoMap(autoMapTypes.REVERSE_DIAGONAL);" class="btn btn-nav-icon" id="revDiagButton" data-toggle="tooltip" data-placement="bottom" title="Reverse diagonal preset"><i class="icon-btn icon-preset-reversed-diagonal" id="revDiagImg"></i></button>
                    </li>
                </ul>
            </div>
        </nav>
        <div class="col" id="view" hidden>
            {{ template "salvoView" . }}
        </div>
        <div class="row grid-wrapper-salvo" id="default">
            <div class="col" style="height: 100%;width:87%">
                <div class="row" style="height: 5%;width:100%">
                    <div class="col salvo-sel-dst">
                    </div>
                    <div class="col" style="width:90%;height:100%">
                        <div class="salvo-src-list">
                        {{ range $index := loop 15 0 }}
                        <button class="btn btn-src" id="source{{ $index }}" onclick="handleSourceClick(this)">SRC {{ $index }}</button>
                        {{ end }}
                        </div>
                    </div>
                </div>
                <div class="row" style="height: 100%;width:100%">
                    <div class="col salvo-dst-list">
                        {{ range $index := loop 15 0 }}
                        <button class="btn btn-dest" id="dest{{ $index }}" onclick="handleDestClick(this)">DST {{ $index }}</button>
                        {{ end }}
                    </div>
                    <div class="col" style="width: 90%;height: 95%">
                        <div class="col" style="width:100%;height:100%;display:flex;flex-direction:column">
                            <div class="row salvo-matrix" id="salvoMatrix" tabindex="1" onkeydown="handleKeyboardNavigation(event)" onmouseover="document.getElementById('salvoMatrix').focus();" onwheel="scrollMatrix(event)" onkeyup="clearInterval(repeatScrolling)">
                                {{ template "salvoMatrix" . }}
                            </div>
                            <div class="row salvo-src-nav">
                                <button class="btn btn-horizontal-nav" id="prevSrcPage" onmousedown="handleScrollButton(event, onClickSrcScroll, -mMaxDisplaySrcs)" onmouseup="clearInterval(repeatScrolling)" onmouseout="clearInterval(repeatScrolling)"><i class="icon-arrow-left-double icon-btn"></i></button>
                                <button class="btn btn-horizontal-nav" id="prevSrc" onmousedown="handleScrollButton(event, onClickSrcScroll, -1)" onmouseup="clearInterval(repeatScrolling)" onmouseout="clearInterval(repeatScrolling)"><i class="icon-arrow-left icon-btn"></i></button>
                                <input class="scrollbar scrollbar-horizontal" type="range" min="0" max="100" orient="horizontal" onkeydown="handleKeyboardNavigation(event)" value="0" id="srcScrollBar" oninput="handleSrcScroll();" onwheel="handleScrollBar(event, onClickSrcScroll)"/>
                                <button class="btn btn-horizontal-nav" id="nextSrc" onmousedown="handleScrollButton(event, onClickSrcScroll, 1)" onmouseup="clearInterval(repeatScrolling)" onmouseout="clearInterval(repeatScrolling)"><i class="icon-arrow-right icon-btn"></i></button>
                                <button class="btn btn-horizontal-nav" id="nextSrcPage" onmousedown="handleScrollButton(event, onClickSrcScroll, mMaxDisplaySrcs)" onmouseup="clearInterval(repeatScrolling)" onmouseout="clearInterval(repeatScrolling)"><i class="icon-arrow-right-double icon-btn"></i></button>
                            </div>
                        </div>

                    </div>
                    <div class="col salvo-dst-nav">
                        <button class="btn btn-vertical-nav" id="prevDstPage" onmousedown="handleScrollButton(event, onClickDstScroll, -mMaxDisplayDests)" onmouseup="clearInterval(repeatScrolling)" onmouseout="clearInterval(repeatScrolling)"><i class="icon-arrow-up-double icon-btn"></i></button>
                        <button class="btn btn-vertical-nav" id="prevDst" onmousedown="handleScrollButton(event, onClickDstScroll, -1)" onmouseup="clearInterval(repeatScrolling)" onmouseout="clearInterval(repeatScrolling)"><i class="icon-arrow-up icon-btn"></i></button>
                        <input class="scrollbar scrollbar-vertical" type="range" min="0" max="100" orient="vertical" value="0" id="dstScrollBar" oninput="handleDstScroll();" onwheel="handleScrollBar(event, onClickDstScroll)"/>
                        <button class="btn btn-vertical-nav" id="nextDst" onmousedown="handleScrollButton(event, onClickDstScroll, 1)" onmouseup="clearInterval(repeatScrolling)" onmouseout="clearInterval(repeatScrolling)"><i class="icon-arrow-down icon-btn"></i></button>
                        <button class="btn btn-vertical-nav" id="nextDstPage" onmousedown="handleScrollButton(event, onClickDstScroll, mMaxDisplayDests)" onmouseup="clearInterval(repeatScrolling)" onmouseout="clearInterval(repeatScrolling)"><i class="icon-arrow-down-double icon-btn"></i></button>
                    </div>
                </div>
            </div>
            <div class="salvo-levels" onwheel="scrollLevels(event)">
                {{ range .Levels }}
                <button class="btn btn-level" id="level{{ .Id }}" style="background-color: {{ .Color }}" value="{{ .Id }}" onclick="clickLevel({{ .Id }}, true)">{{ .Name }}</button>
                {{ end }}
                <button class="btn btn-level" id="destFollow" onclick="handleDestFollow()">Follow</button>
            </div>
            <div class="col salvo-level-nav">
                <button class="btn btn-vertical-nav" id="prevLevelPage" onmousedown="handleScrollButton(event, onClickLevelScroll, -mMaxDisplayDests)" onmouseup="clearInterval(repeatScrolling)" onmouseout="clearInterval(repeatScrolling)"><i class="icon-arrow-up-double icon-btn"></i></button>
                <button class="btn btn-vertical-nav" id="prevLevel" onmousedown="handleScrollButton(event, onClickLevelScroll, -1)" onmouseup="clearInterval(repeatScrolling)" onmouseout="clearInterval(repeatScrolling)"><i class="icon-arrow-up icon-btn"></i></button>
                <input class="scrollbar scrollbar-vertical" type="range" min="0" max="100" orient="vertical" value="0" id="levelScrollBar" oninput="setLevels();" onwheel="handleScrollBar(event, onClickLevelScroll)"/>
                <button class="btn btn-vertical-nav" id="nextLevel" onmousedown="handleScrollButton(event, onClickLevelScroll, 1)" onmouseup="clearInterval(repeatScrolling)" onmouseout="clearInterval(repeatScrolling)"><i class="icon-arrow-down icon-btn"></i></button>
                <button class="btn btn-vertical-nav" id="nextLevelPage" onmousedown="handleScrollButton(event, onClickLevelScroll, mMaxDisplayDests)" onmouseup="clearInterval(repeatScrolling)" onmouseout="clearInterval(repeatScrolling)"><i class="icon-arrow-down-double icon-btn"></i></button>
        </div>
    </div>
    <div id="salvoSummaryBar" class="grid-summary-bar" role="status" aria-live="polite">
        <div class="grid-summary-item">
            <span id="salvoSummaryTotalLabel" class="col-data-label">Salvos:</span>
            <span id="salvoSummaryTotalValue" class="form-control rounded-0 auto-size" aria-labelledby="salvoSummaryTotalLabel"></span>
        </div>
        <span class="grid-summary-sep"><i class="icon-separator" aria-hidden="true"></i></span>
        <div class="grid-summary-item">
            <span id="salvoSummarySelectedLabel" class="col-data-label">Selected:</span>
            <span id="salvoSummarySelectedValue" class="form-control rounded-0 auto-size" aria-labelledby="salvoSummarySelectedLabel"></span>
        </div>
        <span class="grid-summary-sep"><i class="icon-separator" aria-hidden="true"></i></span>
        <div class="grid-summary-item">
            <span id="salvoSummaryXpointsLabel" class="col-data-label">Crosspoints:</span>
            <span id="salvoSummaryXpointsValue" class="form-control rounded-0 auto-size" aria-labelledby="salvoSummaryXpointsLabel"></span>
        </div>
    </div>
</div>

<div class="modal" id="addSalvoModal" data-bs-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="addSalvoModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-add-salvo-size">
        <div class="modal-content">
            <div class="modal-header justify-content-between">
                <span class="modal-title" id="addSalvoModalLabel"><i class="icon-add icon-white"></i>Add Salvo</span>
                <span class="btn btn-transparent" onclick="hideDialog('addSalvoModal');"><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="salvoName" id="salvoName" tabindex="0"/></td>
                    </tr>
                </table>
                <div class="modal-footer justify-content-between">
                    <button class="btn btn-text btn-outline-secondary" tabindex="2" onclick="hideDialog('addSalvoModal')">Cancel</button>
                    <button class="btn btn-text" tabindex="1" onclick="addSalvoRows()">Apply</button>
                </div>
            </div>
        </div>
    </div>S
</div>

<div class="modal" id="duplicateSalvoModal" data-bs-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="duplicateSalvoModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-add-salvo-size">
        <div class="modal-content">
            <div class="modal-header justify-content-between">
                <span class="modal-title" id="duplicateSalvoModalLabel"><i class="icon-add icon-white"></i>Duplicate Salvo</span>
                <span class="btn btn-transparent" onclick="hideDialog('duplicateSalvoModal');"><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">New Name:</td>
                        <td class="col-data-input"><input class="form-control rounded-0 name-size" name="duplicateName" id="duplicateName" tabindex="0"/></td>
                    </tr>
                </table>
                <div class="modal-footer justify-content-between">
                    <button class="btn btn-text btn-outline-secondary" tabindex="2" onclick="hideDialog('duplicateSalvoModal')">Cancel</button>
                    <button class="btn btn-text" data-bs-dismiss="modal" tabindex="1" onclick="duplicateSalvo()">Apply</button>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal" id="systemCaptureSalvoModal" data-bs-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="duplicateSalvoModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-capture-size">
        <div class="modal-content">
            <div class="modal-header justify-content-between">
                <span class="modal-title" id="systemCaptureSalvoModalLabel"><i class="icon-add icon-white"></i>Capture System Status</span>
                <span class="btn btn-transparent" onclick="hideDialog('systemCaptureSalvoModal');"><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">New Name:</td>
                        <td class="col-data-input"><input class="form-control rounded-0 name-size" name="systemCaptureName" id="systemCaptureName" tabindex="0"/></td>
                    </tr>
                </table>
                <div class="modal-footer justify-content-between">
                    <button class="btn btn-text btn-outline-secondary" tabindex="2" onclick="hideDialog('systemCaptureSalvoModal')">Cancel</button>
                    <button class="btn btn-text" data-bs-dismiss="modal" tabindex="1" onclick="handleCapture()">Apply</button>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal" id="destCaptureSalvoModal" data-bs-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="duplicateSalvoModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-capture-size">
        <div class="modal-content">
            <div class="modal-header justify-content-between">
                <span class="modal-title" id="destaptureSalvoModalLabel"><i class="icon-add icon-white"></i>Capture Destination Status</span>
                <span class="btn btn-transparent" onclick="hideDialog('destCaptureSalvoModal');"><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">Update Current:</td>
                        <td class="col-data-input"><input class="form-check-input" type="checkbox" name="addToSelected" id="addToSelected" tabindex="0" onchange="onChangeAddToSelected(this.checked)" checked/></td>
                    </tr>
                    <tr class="row-data">
                        <td class="col-data-label">New Name:</td>
                        <td class="col-data-input"><input class="form-control rounded-0 name-size" name="systemCaptureName" id="destCaptureName" tabindex="1" disabled/></td>
                    </tr>
                </table>
                <div class="modal-footer justify-content-between">
                    <button class="btn btn-text btn-outline-secondary" tabindex="3" onclick="hideDialog('destCaptureSalvoModal')">Cancel</button>
                    <button class="btn btn-text" data-bs-dismiss="modal" tabindex="2" onclick="handleCapture('dest')">Apply</button>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal" id="portTypeSalvoModal" data-bs-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="duplicateSalvoModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-capture-size">
        <div class="modal-content">
            <div class="modal-header justify-content-between">
                <span class="modal-title" id="portTypeSalvoModalLabel"><i class="icon-add icon-white"></i>Capture Port Status</span>
                <span class="btn btn-transparent" onclick="hideDialog('portTypeSalvoModal');"><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">New name:</td>
                        <td class="col-data-input"><input class="form-control rounded-0 name-size" name="systemCaptureName" id="portTypeName" tabindex="0"/></td>
                    </tr>
                    <tr class="row-data">
                        <td class="col-data-label">Port Type:</td>
                        <td class="col-data-input">
                            <div class="select-wrapper">
                                <select class="custom-select" name="portType" id="portType" tabindex="1">
                                    <option value="output" selected>Output</option>
                                    <option value="mv-head-pip">MV Head PiP</option>
                                    <option value="mv-system-pip">MV System PiP</option>
                                    <option value="mv-head">MV Head</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('portTypeSalvoModal')">Cancel</button>
                    <button class="btn btn-text" data-bs-dismiss="modal" tabindex="2" onclick="handleCapture('portType')">Apply</button>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal" id="removeSalvoModal" data-bs-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="removeSalvoModalLabel" 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="removeSalvoModalLabel"><i class="icon-delete icon-white"></i>Delete Salvo</span>
                <span class="btn btn-transparent" onclick="hideDialog('removeSalvoModal');"><i class="icon-close-header"></i></span>
            </div>
            <div class="modal-body">
                <p class="container-data">Are you sure you want to delete the selected salvo(s)?</p>
            </div>
            <div class="modal-footer justify-content-between">
                <button class="btn btn-text btn-outline-secondary" tabindex="1" onclick="hideDialog('removeSalvoModal')">Cancel</button>
                <button  class="btn btn-text" data-bs-dismiss="modal" tabindex="0" onclick="removeSalvoRows()">Apply</button>
            </div>
        </div>
    </div>
</div>

<div class="modal" id="showLevelModal" data-bs-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="showLevelModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-show-levels-size">
        <div class="modal-content">
            <div class="modal-header justify-content-between">
                <span class="modal-title" id="showSalvoModalLabel"><i class="icon-levels icon-white"></i>Levels</span>
                <span class="btn btn-transparent" data-bs-dismiss="modal"><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 level-label-width">Max Levels to Display:</td>
                        <td class="col-data-input">
                            <span class="number-wrapper"><input class="form-control rounded-0 number-size" name="numDisplayedLevels" id="numDisplayedLevels" type="number" min="1" max="17" oninput="restrictNumberField(this)" onchange="onChangeVisibleLevels();" value="17"/></span>

                        </td>
                    </tr>
                </table>
                <div class="modal-footer">
                    <button class="btn btn-text" tabindex="0" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="drawer splitBorder find-drawer-hidden" id="findDrawer">
    <div class="drawer-wrapper">
        <div class="col">
            <nav class="navbar navbar-find">
                <div><i class="icon-search icon-white"></i>Find Sources</div>
            </nav>
            <table class="container-data-find-and-filter">
                <tr class="row-data">
                    <td class="col-data-label-80">Find String:</td>
                    <td class="col-data-input"><input class="form-control rounded-0 template-name" type="search" name="salvoName" tabindex="1" id="sourceFindString"/></td>
                </tr>
                <tr class="row-data">
                    <td class="col-data-label-80">Exact Match:</td>
                    <td class="col-data-input"><input class="form-check-input" type="checkbox" value="" tabindex="2" id="sourceExactMatch"></td>
                </tr>
                <tr class="row-data">
                    <td class="col-data-label-80">Match Case:</td>
                    <td class="col-data-input"><input class="form-check-input" type="checkbox" value="" tabindex="3" id="sourceMatchCase"></td>
                </tr>
            </table>
            <div>
                <label class="error-message" id="sourceNotFoundLabel"> </label>
            </div>
            <div class="modal-justify-end">
                <button class="btn btn-text" tabindex="4" onclick="handleFind('source', -1);"><i class="icon-page-horizontal-previous"></i>Find prev</button>
                <button class="btn btn-text" tabindex="5" onclick="handleFind('source', 1);">Find next<i  class="icon-page-horizontal-next"></i></button>
            </div>
            <!-- destFind tab -->
          <nav class="navbar navbar-find navbar-find-margin">
            <div><i class="icon-search icon-white"></i>Find Destinations</div>
          </nav>
            <table class="container-data-find-and-filter">
                <tr class="row-data">
                    <td class="col-data-label-80">Find String:</td>
                    <td class="col-data-input"><input class="form-control rounded-0 template-name" type="search" name="salvoName" tabindex="7" id="destFindString"/></td>
                </tr>
                <tr class="row-data">
                    <td class="col-data-label-80">Exact Match:</td>
                    <td class="col-data-input"><input class="form-check-input" type="checkbox" value="" tabindex="8" id="destExactMatch"></td>
                </tr>
                <tr class="row-data">
                    <td class="col-data-label-80">Match Case:</td>
                    <td class="col-data-input"><input class="form-check-input" type="checkbox" value="" tabindex="9" id="destMatchCase"></td>
                </tr>
            </table>
            <div>
                <label class="error-message" id="destNotFoundLabel"> </label>
            </div>
            <div class="modal-justify-end">
                <button class="btn btn-text" tabindex="10" onclick="handleFind('dest', -1);"><i class="icon-page-horizontal-previous"></i>Find prev</button>
                <button class="btn btn-text" tabindex="11" onclick="handleFind('dest', 1);">Find next<i class="icon-page-horizontal-next"></i></button>
            </div>
            <div class="navbar navbar-filter navbar-filter-margin">
                <div><i class="icon-filter icon-white"></i>Filter</div>
            </div>
            <table class="container-data-find-and-filter">
                <tr class="row-data">
                    <td class="col-data-label-80">Sources:</td>
                    <td class="col-data-input"><input class="form-control rounded-0 template-name" type="search" tabindex="0" oninput="handleSourceFilter()" name="salvoName" id="sourceFilter"/></td>
                </tr>
                <tr class="row-data">
                    <td class="col-data-label-80">Destinations:</td>
                    <td class="col-data-input"><input class="form-control rounded-0 template-name" type="search" tabindex="1" oninput="handleDestFilter()" name="salvoName" id="destFilter"/></td>
                </tr>
            </table>
        </div>
    </div>
    <div class="modal-footer panel-footer salvo-find-drawer-modal-footer-size justify-content-between">
        <button onclick="cancelFind()" class="btn btn-text btn-outline-secondary btn-close-canvas">Cancel</button>
        <button class="btn btn-text" onclick="toggleFindDrawer();clearFind('dest');clearFind('source');">Close</button>
    </div>
</div>

<script src="/static/js/checkboxRenderer.js"></script>
<script src="/static/js/keystrokeHandling.js"></script>
<script src="/static/js/inputFields.js"></script>

<script type="text/javascript" charset="utf-8">
    let uiidBase = 0;
    const sessionKeys = {
        LEVEL_LIST: "levelList",
        VISIBLE_LEVELS: "visibleLevels",
        SELECTED_SALVO_ID: "selectedSalvoId",
        VISIBLE_DESTS: "visibleDests",
        SEL_LEVELS: "selLevels",
        NUM_DISP_SRC: "numDispSrc",
        NUM_DISP_DEST: "numDispDest",
        DEST_FOLLOW: "destFollow",
        PREV_FIND_DEST: "prevFindDest",
        PREV_FIND_SRC: "prevFindSrc",
        COLOR_LIST: "colorList",
    };

    let mFilteredDests;
    let mFilteredSrcs;
    let mFilteredSrcIds;
    let mSelDests = [];
    let mSrcList;
    let mDestList;
    let mAllDests;

    const logicalEndTypes = {
        SOURCE: "source",
        DEST: "dest",
    }

    class automapType {
        constructor(confirmationTitle, confirmationMessage, confirmationIcon, confirmationCallback) {
            this.confirmationTitle = confirmationTitle;
            this.confirmationMessage = confirmationMessage;
            this.confirmationIcon = confirmationIcon;
            this.confirmationCallback = confirmationCallback;
        }
    }

    const autoMapTypes = Object.freeze({
        DIAGONAL: new automapType(
            "Confirm Diagonal Preset",
            "This function will create a <b>diagonal preset</b> using all sources and destinations. All current presets (if any) will be overwritten. <br><br> Are you sure you want to continue?",
            "icon-preset-diagonal",
            "setDiagView(false, false)"
        ),
        DIAGONAL_VIEW:  new automapType(
            "Confirm Diagonal Preset (Current View)",
            "This function will create a <b>diagonal preset</b> using the sources and destinations present in the current view. Presets already created in this view will be overwritten. All other presets created for the remain sources and destinations (if any) will be kept. <br><br> Are you sure you want to continue?",
            "icon-preset-diagonal-current-view",
            "setDiagView(true, false)"
        ),
        REVERSE_DIAGONAL:  new automapType(
            "Confirm Reversed Diagonal Preset",
            "This function will create a <b>reversed diagonal preset</b> using all sources and destinations. All current presets (if any) will be overwritten. <br><br> Are you sure you want to continue?",
            "icon-preset-reversed-diagonal",
            "setDiagView(false, true)"
        ),
        REVERSE_DIAGONAL_VIEW:  new automapType(
            "Confirm Reversed Diagonal Preset (Current View)",
            "This function will create a <b>reversed diagonal preset</b> using the sources and destinations present in the current view. Presets already created in this view will be overwritten. All other presets created for the remain sources and destinations (if any) will be kept. <br><br> Are you sure you want to continue?",
            "icon-preset-reversed-diagonal-current-view",
            "setDiagView(true, true)"
        ),
    });

    const objectTypeName = "Salvo";
    class SalvoNameRenderer {
        init(params) {
            const salvoId = sessionStorage.getItem(sessionKeys.SELECTED_SALVO_ID);
            this.eGui = document.createElement('div');
            if (params.data.id === Number(salvoId)) {
                const display = (mSalvoCache.size == 0) ? "initial" : "none";
                this.eGui.innerHTML = params.data.name + "<i id='" + salvoDivIdPrefix + params.data.id + "' class='icon-alarm-warning' style='display:" + display + "; float:right;' data-toggle='tooltip' data-placement='top' title='Empty Salvo'></i>";
            } else {
                this.eGui.innerHTML = params.data.name + "<i id='" + salvoDivIdPrefix + params.data.id + "' class='icon-alarm-warning' style='display:none; float:right;' data-toggle='tooltip' data-placement='top' title='Empty Salvo'></i>";
                fetchSalvoSize(params.data.id)
            }
        }
        getGui() { return this.eGui; }

        refresh(params) {
            return true;
        }
    }

    const salvosColumnDefs = [
        {field: "id", hide: true, maxWidth: 50, getQuickFilterText: () => ''},
        {field: "uiId", headerName: "ID", suppressMovable: true, maxWidth: 50, getQuickFilterText: () => '',
            valueGetter: (params) => { return params.data.uiId + uiidBase; }},
        {field: "name", suppressMovable: true, editable: true, filter: true, comparator: naturalSort, getQuickFilterText: () => '',
            cellRendererSelector: (params) => {
                const salvoNameRendererField = {
                    component: SalvoNameRenderer,
                    params: {},
                };
                if (params.data) {
                    return salvoNameRendererField;
                }
                return undefined;
            }
        },
    ]

    const salvosGridOptions = {
        defaultColDef: {
            resizable: true,
            sortable: true,
            flex:1,
        },
        columnDefs: salvosColumnDefs,
        suppressMenuHide: true,
        suppressDragLeaveHidesColumns: true,
        headerHeight: 36,
        rowHeight: 31,
        rowSelection: 'single',
        onCellValueChanged: onSalvoNameChanged,
        onSelectionChanged: onSalvoSelectionChanged,
        getRowId: row => row.data.id,
        onFirstDataRendered: updateSalvoSummaryBar,
        onModelUpdated: updateSalvoSummaryBar,
        onFilterChanged: updateSalvoSummaryBar,
    };

    const levelColumnDefs = [
        {field: "id", editable: false, hide: true},
        {field: "name", headerName: "Level", editable: false},
        {field: "visible", headerName: "Show", minWidth: 75, maxWidth: 75, editable: true, cellRenderer: CheckboxRendererAG },
    ];

    let captureInProgress = false;
    let hideLoadingModalTimeout;

    const salvoDivIdPrefix = "salvoTableSelector";
    function fetchSalvoSize(salvoId) {
        fetch('/salvo/mappings/size?salvoId=' + salvoId)
            .then((response) => response.json())
            .then((data) => {
                updateSalvoSelectorCell(data, salvoId);
            });
    }

    function updateSalvoSummaryBar() {
        const api =
            document.getElementById("salvosGrid")?.ag_grid?.gridOptions?.api ??
            salvosGridOptions?.api ??
            null;

        const totalVisible = api ? api.getDisplayedRowCount() : 0;

        const selRow  = api?.getSelectedRows?.()?.[0] ?? null;
        const selName = selRow?.name ?? "-";

        const xpts = Number(mSalvoCache?.size ?? 0);

        setText('salvoSummaryTotalValue', totalVisible);
        setText('salvoSummarySelectedValue', selName);
        setText('salvoSummaryXpointsValue', xpts);

        function setText(id, v) {
            const el = document.getElementById(id);
            if (el) el.textContent = String(v);
        }
    }

    function updateSalvoSelectorCell(salvoData, salvoId) {
        let divToUpdate = document.getElementById(salvoDivIdPrefix + salvoId);
        if (divToUpdate) {
            divToUpdate.style.display = (salvoData) ? "initial" : "none";
        } else {
            console.warn("updateSalvoSelectorCell - Unable to find element with ID: " + salvoDivIdPrefix + salvoId)
        }
    }

    function onChangeVisibleLevels() {
        setupLevelsScrollBar();
        setLevels();
    }

    function setLevels() {
        let colorList = [];
        let levelList = JSON.parse(sessionStorage.getItem(sessionKeys.LEVEL_LIST))
        let visibleLevels = JSON.parse(sessionStorage.getItem(sessionKeys.VISIBLE_LEVELS));
        let levelOffset = $("#levelScrollBar").val()
        let numButtons = (Number($("#numDisplayedLevels").val())+1);
        if (levelList.length > 0) {
            levelList.forEach((level, i) => {
                if ((i < levelOffset) || (i >= (Number($("#numDisplayedLevels").val()) + Number(levelOffset)))) {
                    $("#level" +level.id).css("display", "none");
                    const index = visibleLevels.indexOf(Number(level.id));
                    if (index > -1) { // only splice array when item is found
                        visibleLevels.splice(index, 1); // 2nd parameter means remove one item only
                    }
                } else {
                    $("#level" +level.id).css("display", "block");
                    if (!visibleLevels.includes(level.id)) {
                        visibleLevels.push(level.id);
                    }
                }
            });
            let buttonHeight = 100 / numButtons + "%";
            levelList.forEach((level, i) => {
                $("#level" +level.id).height(buttonHeight); //resize buttons after all are hidden/shown
            })
            $("#destFollow").height(buttonHeight);
            //maintain level order
            visibleLevels.sort(function (a, b) {
                return a - b;
            });
            for (let i = 0; i < visibleLevels.length; i++) {
                let levelIndex = levelList.map(object => object.id).indexOf(visibleLevels[i]);
                if (visibleLevels.includes(levelList[levelIndex].id)) {
                    colorList.push(levelList[levelIndex].color);
                }
            }
            sessionStorage.setItem(sessionKeys.VISIBLE_LEVELS, JSON.stringify(visibleLevels));
            mMaxDisplayLevels = visibleLevels.length;
            SetLevelColors(colorList);
            let salvoId = sessionStorage.getItem(sessionKeys.SELECTED_SALVO_ID);
            if (salvoId) {
                setPresetsEx();
            }
        }
    }

    function onSalvoSelectionChanged(){
        const editingButtonIds = ["duplicateSalvo", "duplicateSalvoMenu", "removeSalvo", "removeSalvoMenu", "clearPresets", "clearPresetsMenu", "diagView", "diagViewMenu", "diag", "diagMenu", "revDiagView", "revDiagViewMenu", "revDiag", "revDiagMenu"];
        const viewingButtonIds = ["view", "viewMenu"];
        const selectedRows = salvosGridOptions.api.getSelectedRows();
        if (selectedRows.length > 0 && selectedRows[0].id != undefined) {
            enableButtonIds(editingButtonIds.concat(viewingButtonIds));
            sessionStorage.setItem(sessionKeys.SELECTED_SALVO_ID, selectedRows[0].id);
            displayDialog("LoadingModal");
            fetch('/salvo/mappings?salvoId=' + selectedRows[0].id)
                .then((response) => response.json())
                .then((data) => {
                    cacheCurrentSalvo(data.mappings);
                    salvosGridOptions.api.redrawRows({rowNodes: [salvosGridOptions.api.getRowNode(selectedRows[0].id)]})
                    setPresetsEx();
                    let salvoSize = Object.keys(data.mappings).length;
                    updateClearAllButtonState(salvoSize);
                    refreshSalvoView(data.view);
                    updateSalvoSummaryBar();
                    if (!captureInProgress) {
                        hideDialog("LoadingModal");
                    }
                });
        } else {
            disableButtonIds(editingButtonIds.concat(viewingButtonIds));
            viewGridOptions.api.setRowData([]);
            cacheCurrentSalvo([]);
            setPresetsEx();
        }

        if (dbMode == DBMode_Protect) {
            disableButtonIds(editingButtonIds);
        }
    }

    //mSalvoCache: map with keys of destination id and a value of a map with keys of level id and values of source id
    mSalvoCache = new Map();

    function cacheCurrentSalvo(data) {
        mSalvoCache.clear();
        for (const destId in data) {
            let srcMap = new Map();
            for (const srcId in data[destId]) {
                data[destId][srcId].forEach((level) => {
                    srcMap.set(Number(level.l), {"srcId": Number(srcId), "id": Number(level.m), "salvoId": Number(level.s)});
                });
            }
            mSalvoCache.set(Number(destId), srcMap);
        }
    }

    function updateCurrentSalvoCache(data) {
        const salvoId = Number(sessionStorage.getItem(sessionKeys.SELECTED_SALVO_ID));
        let updatedMappingsMap = new Map();
        let updatedSalvoMappings = {};
        for (const destId in data) {
            let srcMap = mSalvoCache.get(Number(destId)) ? mSalvoCache.get(Number(destId)) : new Map();
            for (const srcId in data[destId]) {
                data[destId][srcId].forEach((level) => {
                    updatedSalvoMappings[level.s] = level.s;
                    if (Number(level.s) !== salvoId) {
                        return
                    }
                    srcMap.set(Number(level.l), {"srcId": Number(srcId), "id": Number(level.m), "salvoId": Number(level.s)});
                });
            }
            mSalvoCache.set(Number(destId), srcMap);
            updatedMappingsMap.set(Number(destId), srcMap);
        }
        updateSalvoSummaryBar();
        setPresetsEx(updatedMappingsMap, true);
        return Object.values(updatedSalvoMappings);
    }

    function clearMappingsFromSalvoCache(data) {
        let updatedSalvoMappings = {};
        let clearedDestPresetsMap = new Map();
        mSalvoCache.forEach(function (dest, destKey, destMap) {
            let clearedSrcMap = new Map();
            dest.forEach(function (mapping, key, destMap) {
                if (data.includes(mapping.id)) {
                    updatedSalvoMappings[mapping.salvoId] = mapping.salvoId;
                    clearedSrcMap.set(key, mapping)
                    destMap.delete(key);
                }
            })
            if (destMap.get(destKey).size === 0) {
                destMap.delete(destKey)
            }
            if (clearedSrcMap.size > 0) {
                clearedDestPresetsMap.set(Number(destKey), clearedSrcMap);
            }
        })
        updateSalvoSummaryBar();
        setPresetsEx(clearedDestPresetsMap, false);
        return Object.values(updatedSalvoMappings);
    }

    function updateClearAllButtonState(length){
        if (length > 0){
            if (dbMode !== DBMode_Protect) {
                enableUiButton("clearAllPresets");
                enableUiButton("clearAllPresetsMenu");
            }
        } else {
            const selectedRows = salvosGridOptions.api.getSelectedRows()[0].id;
            fetch('/salvo/mappings/size?salvoId='+selectedRows)
                .then((response) => response.json())
                .then((data) => {
                    if (data){
                        if (dbMode !== DBMode_Protect) {
                            enableUiButton("clearAllPresets");
                            enableUiButton("clearAllPresetsMenu");
                        }
                    } else {
                        disableUiButton("clearAllPresets");
                        disableUiButton("clearAllPresetsMenu");
                    }
                });
        }
    }

    function toggleFindDrawer(){
        const findDrawer = $("#findDrawer");
        const findButton = $("#findButton");
        var width = 0;
        if (findDrawer.hasClass("find-drawer-hidden")) {
            findDrawer.removeClass("find-drawer-hidden");
            findDrawer.addClass("find-drawer-show");
            findButton.addClass("btn-active");
            width = 267;
        } else {
            findDrawer.removeClass("find-drawer-show");
            findDrawer.addClass("find-drawer-hidden");
            findButton.removeClass("btn-active");
        }
        document.getElementById("footerdiv").style.marginLeft = width + "px";
        resizeAll();
    }

    function resetSalvoTable () {
        fetch('/salvo/agdata')
            .then((response) => response.json())
            .then((data) => {
                let firstSelectedNodeIndex = getFirstSelectedNodeIndex(salvosGridOptions);
                salvosGridOptions.api.setRowData(data);
                setNodeSelected(salvosGridOptions, firstSelectedNodeIndex);
            });
    }

    function onSalvoNameChanged(event){
        if (event.column.colId == "name") {
            if (!event.newValue) {
                return;
            }
            event.newValue = event.newValue.trim();
            if (!validateString(event.newValue)) {
                displayErrorDialog(NameErrorMessage);
                resetSalvoTable();
                return;
            }

            const duplicateNamesId = checkForDuplicateNames (salvosGridOptions, "uiId", event.newValue, event.data.uiId);
            if (duplicateNamesId > -1) {
                displayErrorDialog(getDuplicateNamesError(event.newValue, objectTypeName, duplicateNamesId));
                resetSalvoTable();
                return;
            }
        }
        $.post("/salvo/update", event.data)
            .done(function( data ) {
                console.log('onSalvoNameChanged: done updating device', data);
        });
    }

    function removeSalvoRowsCheck() {
        const selectedData = salvosGridOptions.api.getSelectedRows();
        if (selectedData.length > 0) {
            displayConfirmationDialog(
                "This salvo may be assigned to one or more soft panels. Deleting it will remove it from those assignments. Are you sure you want to proceed?",
                "Delete",
                "removeSalvoRows()",
                "Confirm Delete Salvo",
                "icon-delete icon-white"
            );
        } else {
            displayWarningDialog("Please select a salvo to delete.");
        }
    }

    function removeSalvoRows() {
        let salvoId = sessionStorage.getItem(sessionKeys.SELECTED_SALVO_ID);
        sessionStorage.removeItem(sessionKeys.SELECTED_SALVO_ID);
        setPresetsEx();
        displayDialog("LoadingModal");
        $.ajax({ url: "/salvo/remove?ids=" + salvoId,
            success: () => {
                mSalvoCache.clear();
                hideDialog('removeSalvoModal');
                hideDialog("LoadingModal");
            },
            error: (error) => {
                displayErrorDialog(error.responseText ||JSON.stringify(error));
            }
        });
    }

    function addSalvoRowsCheck() {
        document.getElementById("salvoName").value = "";
        displayDialog('addSalvoModal');
    }

    function addSalvoRows() {
        let name = document.getElementById("salvoName").value;
        name = name.trim();
        if (!validateString(name)) {
            displayErrorDialog(NameErrorMessage);
            return;
        }

        const duplicateNamesId = checkForDuplicateNames (salvosGridOptions, "uiId", name, null);
        if (duplicateNamesId > -1) {
            displayErrorDialog(getDuplicateNamesError(name, objectTypeName, duplicateNamesId));
            return;
        }

        let formatName = encodeURIComponent(name);
        hideDialog('addSalvoModal');
        $.ajax({
            url: "/salvo/post?newName=" + formatName,
            success: (result) => {
                hideDialog('addSalvoModal');
            },
            error: (error) => {
                displayErrorDialog(error.responseText || JSON.stringify(error));
            }
        });
    }

    function duplicateSalvoRowsCheck() {
        const selectedData = salvosGridOptions.api.getSelectedRows();
        document.getElementById("duplicateName").value = (selectedData.length > 0) ? selectedData[0].name : "";
        displayDialog('duplicateSalvoModal');
    }

    function duplicateSalvo() {
        let newName = document.getElementById("duplicateName").value;
        newName = newName.trim();
        if (!validateString(newName)) {
            displayErrorDialog(NameErrorMessage);
            return;
        }

        const duplicateNamesId = checkForDuplicateNames (salvosGridOptions, "uiId", newName, null);
        if (duplicateNamesId > -1) {
            displayErrorDialog(getDuplicateNamesError(newName, objectTypeName, duplicateNamesId));
            return;
        }
        const urlParameters = [
            "salvoId=" + sessionStorage.getItem(sessionKeys.SELECTED_SALVO_ID),
            "newName=" +  encodeURIComponent(newName)
        ];
        captureInProgress = true;
        displayDialog("LoadingModal");
        $.ajax({
            url: "/salvo/duplicate?" + urlParameters.join("&"),
            success: () => {
                hideDialog('duplicateSalvoModal');
                captureInProgress = false;
            },
            error: (error) => {
                displayErrorDialog(error.responseText || JSON.stringify(error));
                captureInProgress = false;
            }
        });
    }

    function setupSessionStorage(){
        sessionStorage.removeItem(sessionKeys.SELECTED_SALVO_ID);
        sessionStorage.removeItem(sessionKeys.SEL_LEVELS);

        sessionStorage.setItem(sessionKeys.NUM_DISP_SRC, 16);
        sessionStorage.setItem(sessionKeys.NUM_DISP_DEST, 16);
        sessionStorage.setItem(sessionKeys.DEST_FOLLOW, JSON.stringify(true));
        sessionStorage.setItem(sessionKeys.LEVEL_LIST, JSON.stringify([]));

        sessionStorage.setItem(sessionKeys.PREV_FIND_DEST, -1);
        sessionStorage.setItem(sessionKeys.PREV_FIND_SRC, -1);
    }

    function setupSources(){
        let sourceList = [];
        {{ range .Sources }}
            sourceList.push({name: {{ .Name }}, id: {{ .Id }}});
        {{ end }}
        mSrcList = sourceList;
        mFilteredSrcs = sourceList;
        mFilteredSrcIds = Array.from(mFilteredSrcs, (src) => src.id)
        const numDispSrc = Number(sessionStorage.getItem(sessionKeys.NUM_DISP_DEST));
        let srcScrollBar = document.getElementById("srcScrollBar");
        srcScrollBar.max = sourceList.length - numDispSrc;
        srcScrollBar.value = 0;
        setSourceButtons();
    }

    function setupDestinations(){
        let destList = [];
        let destIds = [];
        {{ range .Destinations }}
            destList.push({name: {{ .Name }}, id: {{ .Id }}});
            destIds.push({{ .Id }});
        {{ end }}
        mDestList = destList;
        mAllDests = destIds;
        mFilteredDests = destList;
        const numDispDest = Number(sessionStorage.getItem(sessionKeys.NUM_DISP_DEST));
        let destScrollBar = document.getElementById("dstScrollBar");
        destScrollBar.max = destList.length - numDispDest;
        destScrollBar.value = 0;
        setDestButtons();
    }

    function setupLevels(){
        let colorList = [];
        let levelList = [];
        let visibleLevels = [];
        {{ range .Levels }}
            levelList.push({id: {{ .Id }}, color: {{ .Color }}});
            colorList.push({{ .Color }});
            if (visibleLevels.length < $("#numDisplayedLevels").val()){
                visibleLevels.push({{ .Id }});
            } else {
                document.getElementById("level{{ .Id }}").style.display = "none";
            }
            clickLevel({{ .Id }}, false);
        {{ end }}
        sessionStorage.setItem(sessionKeys.LEVEL_LIST, JSON.stringify(levelList));
        sessionStorage.setItem(sessionKeys.COLOR_LIST, JSON.stringify(colorList));
        sessionStorage.setItem(sessionKeys.VISIBLE_LEVELS, JSON.stringify(visibleLevels));
        setupLevelsScrollBar();
        SetLevelColors(colorList);
    }

    function setupLevelsScrollBar() {
        $("#levelScrollBar").val(0);
        $("#levelScrollBar").attr("max", JSON.parse(sessionStorage.getItem(sessionKeys.LEVEL_LIST)).length - $("#numDisplayedLevels").val());
    }

    function initializeMenuButtons() {
        if (mDestList.length == 0 || mSrcList.length == 0) {
            disableUiButton("selAllDests");
            disableUiButton("selAllDestsMenu");
            disableUiButton("deselectAllDests");
            disableUiButton("deselectAllDestsMenu");
            disableUiButton("captureSystemStatus");
            disableUiButton("captureSystemStatusMenu");
            disableUiButton("captureDestStatus");
            disableUiButton("captureDestStatusMenu");
            disableUiButton("clearAllPresets");
            disableUiButton("clearAllPresetsMenu");
            disableUiButton("clearDestPresets");
            disableUiButton("clearDestPresetsMenu");
            disableUiButton("find");
            disableUiButton("findMenu");
        }
        if (dbMode === DBMode_Protect) {
            disableUiButton("captureSystemStatus");
            disableUiButton("captureSystemStatusMenu");
            disableUiButton("captureDestStatus");
            disableUiButton("captureDestStatusMenu");
            disableUiButton("clearAllPresets");
            disableUiButton("clearAllPresetsMenu");
            disableUiButton("clearDestPresets");
            disableUiButton("clearDestPresetsMenu");
        }
    }

    function selectFirstSalvo() {
        salvosGridOptions.api.forEachNode((node) => {
            if (node.rowIndex == 0) {
                node.setSelected(true, true);
            }
        });
    }

    document.addEventListener('DOMContentLoaded', function () {
        setupSessionStorage();
        setupSources();
        setupDestinations();
        setupLevels();
        initializeMenuButtons();
        init();
        document.body.onresize = resizeAll;
        let gridDiv = document.querySelector('#salvosGrid');
        let salvosGrid = new agGrid.Grid(gridDiv, salvosGridOptions);
        fetch('/salvo/agdata')
            .then((response) => response.json())
            .then((data) => {
                salvosGridOptions.api.setRowData(data);
                onSalvoSelectionChanged();
                selectFirstSalvo();
            });
        document.getElementById("salvosGrid").ag_grid = salvosGrid;
        addWSDBListener();
        initializeSalvoView();
        window.addEventListener(DBMODE_TABLE, handleSalvoModeChange);
        getUIIDBaseSetting(updateUiIdBase);
        setLevels();
        updateSalvoSummaryBar();
    });

    function setSourceButtons(){
        mAssignedSrcs = 0;
        const srcOffset = document.getElementById("srcScrollBar").value;
        const numDispSrc = Number(sessionStorage.getItem(sessionKeys.NUM_DISP_SRC));
        const start = Number(srcOffset);
        let visibleSources = [];

        for (let i=start; i<start+numDispSrc; i++){
            if (mFilteredSrcs[i] != null) {
                mAssignedSrcs++;
                document.getElementById(logicalEndTypes.SOURCE + (i - srcOffset)).value = mFilteredSrcs[i].id;
                document.getElementById(logicalEndTypes.SOURCE + (i - srcOffset)).innerText = mFilteredSrcs[i].name;
                document.getElementById(logicalEndTypes.SOURCE + (i - srcOffset)).title = mFilteredSrcs[i].name;
                visibleSources.push(mFilteredSrcs[i].id);
            } else {
                document.getElementById(logicalEndTypes.SOURCE + (i - srcOffset)).value = "";
                document.getElementById(logicalEndTypes.SOURCE + (i - srcOffset)).innerText = "";
            }
        }
    }

    function setDestButtons(){
        mAssignedDests = 0;
        const destOffset = document.getElementById("dstScrollBar").value;
        const selDests = mSelDests;
        const numDispDest = Number(sessionStorage.getItem(sessionKeys.NUM_DISP_DEST));
        const start = Number(destOffset);
        let visibleDests = [];

        for (let i=start; i<start+numDispDest; i++){
            if (mFilteredDests[i] != null) {
                document.getElementById(logicalEndTypes.DEST + (i - destOffset)).value = mFilteredDests[i].id;
                document.getElementById(logicalEndTypes.DEST + (i - destOffset)).innerText = mFilteredDests[i].name;

                document.getElementById(logicalEndTypes.DEST + (i - destOffset)).title = mFilteredDests[i].name;
                visibleDests.push(mFilteredDests[i].id);
                mAssignedDests++;
                if (selDests.includes(mFilteredDests[i].id)){
                    document.getElementById(logicalEndTypes.DEST + (i - destOffset)).style.backgroundColor = "var(--select-bg)";
                } else {
                    document.getElementById(logicalEndTypes.DEST + (i - destOffset)).style.backgroundColor = "var(--button-bg)";
                }
            } else {
                document.getElementById(logicalEndTypes.DEST + (i - destOffset)).value = "";
                document.getElementById(logicalEndTypes.DEST + (i - destOffset)).innerText = "";
                document.getElementById(logicalEndTypes.DEST + (i - destOffset)).style.backgroundColor = "var(--button-bg)";
            }
        }
        setRequestedDests(start, numDispDest)
    }

    function setRequestedDests(start, numDispDest){
        let visibleDests = [];
        let firstIndex = start;
        let endIndex = start+(3*numDispDest);

        if (start+endIndex > mFilteredDests.length){
            endIndex = mFilteredDests.length;
        }
        for (let i=firstIndex; i<endIndex; i++) {
            visibleDests.push(mFilteredDests[i].id);
        }
        sessionStorage.setItem(sessionKeys.VISIBLE_DESTS, JSON.stringify(visibleDests))
    }

    function handleSourceClick(button) {
        if (button.value != "" && !$.active && dbMode !== DBMode_Protect) {
            setSourcePresets(Number(button.value));
        }
    }

    function handleDestClick(button){
        if (button.value != "") {
            let selectedDests = mSelDests;
            const id = Number(button.value);
            if (this.event.altKey) {
                handleGoTo(id);
                if (selectedDests.includes(id)) { return }
                handleDeselectAllDest();
                selectedDests = mSelDests;
            }
            if (selectedDests.includes(id)) {
                const index = selectedDests.indexOf(id);
                if (index > -1) { // only splice array when item is found
                    selectedDests.splice(index, 1); // 2nd parameter means remove one item only
                    document.getElementById(button.id).style.backgroundColor = "var(--button-bg)";
                }
            } else {
                selectedDests.push(id);
                document.getElementById(button.id).style.backgroundColor = "var(--select-bg)";
            }

            if (selectedDests.length > 0){
                enableUiButton("deselectAllDests");
                enableUiButton("deselectAllDestsMenu");
                if (dbMode !== DBMode_Protect) {
                    enableUiButton("captureDestStatus");
                    enableUiButton("captureDestStatusMenu");
                    enableUiButton("clearDestPresets");
                    enableUiButton("clearDestPresetsMenu");
                }
                document.getElementById("selAllDestsButton").value = true;
            } else {
                disableUiButton("deselectAllDests");
                disableUiButton("deselectAllDestsMenu");
                disableUiButton("captureDestStatus");
                disableUiButton("captureDestStatusMenu");
                disableUiButton("clearDestPresets");
                disableUiButton("clearDestPresetsMenu");
                document.getElementById("selAllDestsButton").value = false;
            }

            mSelDests = selectedDests.sort(function(a, b) {
                return a - b;
            });
        }
    }

    function handleDstScroll(){
        setPresetsEx();
        setDestButtons();
        let prevFind = sessionStorage.getItem(sessionKeys.PREV_FIND_DEST);
        if (prevFind != -1) {
            clearPreviousFind(logicalEndTypes.DEST);
            let offset = Number(document.getElementById("dstScrollBar").value);
            if (prevFind >= offset && prevFind < (offset + mMaxDisplayDests)) {
                highlightLogical(logicalEndTypes.DEST, prevFind);
            }
        }
    }

    function onClickDstScroll(direction){
        let offset = Number(document.getElementById("dstScrollBar").value);
        let dstScrollBar = document.getElementById("dstScrollBar");
        let newOffset = Math.min(Math.max(offset + direction, Number(dstScrollBar.min)), Number(dstScrollBar.max));
        dstScrollBar.value = newOffset;
        handleDstScroll();
    }

    function onClickLevelScroll(direction){
        const offset = Number(document.getElementById("levelScrollBar").value);
        let levelScrollBar = document.getElementById("levelScrollBar");
        levelScrollBar.value = Math.min(Math.max(offset + direction, Number(levelScrollBar.min)), Number(levelScrollBar.max));
        setLevels();
    }

    function goToSourcePage(offset){
        document.getElementById("srcScrollBar").value = offset;
        setSourceButtons();
        setPresetsEx();
    }

    function goToDestPage(offset){
        document.getElementById("dstScrollBar").value = offset;
        setDestButtons();
        setPresetsEx();
    }

    function scrollMatrix(event) {
        const direction = (event.deltaY > 0) ? 1 : -1;
        if (event.shiftKey) {
            onClickSrcScroll(direction);
        } else {
            onClickDstScroll(direction);
        }
    }

    function scrollLevels(event) {
        const direction = (event.deltaY > 0) ? 1 : -1;
        onClickLevelScroll(direction);
    }

    let repeatScrolling;
    function startHoldScrolling(callback, arg, interval, delay) {
        repeatScrolling = setInterval(function() {
            clearInterval(repeatScrolling);
            repeatScrolling = setInterval(function () {
                callback(arg);
            }, interval);
        }, delay);
    }

    function handleScrollButton(event, callback, direction){
        if (event.button == 0 && event.buttons == 1) {
            callback(direction);
            startHoldScrolling(callback, direction, 50, 500)
        } else {
            clearInterval(repeatScrolling)
        }
    }

    function handleKeyboardNavigation(event) {
        let scrollOffset = 1;
        switch (event.key) {
            case "ArrowUp":
                scrollOffset = event.ctrlKey ? -mMaxDisplayDests : -1;
                onClickDstScroll(scrollOffset);
                break;
            case "ArrowDown":
                scrollOffset = event.ctrlKey ? mMaxDisplayDests : 1;
                onClickDstScroll(scrollOffset);
                break;
            case "ArrowLeft":
                scrollOffset = event.ctrlKey ? -mMaxDisplaySrcs : -1;
                onClickSrcScroll(scrollOffset);
                break;
            case "ArrowRight":
                scrollOffset = event.ctrlKey ? mMaxDisplayDests : 1;
                onClickSrcScroll(scrollOffset);
                break;
            case "PageDown":
                event.altKey ? onClickSrcScroll(mMaxDisplaySrcs) : onClickDstScroll(mMaxDisplayDests);
                break;
            case "PageUp":
                event.altKey ? onClickSrcScroll(-mMaxDisplaySrcs) : onClickDstScroll(-mMaxDisplayDests);
                break;

        }
        //handleScrollButton(event, onClickSrcScroll, -1)
    }

    function handleScrollBar(event, callback) {
        if(event.deltaY > 0) {
            callback(1);
        } else {
            callback(-1);
        }
    }

    function handleSrcScroll(){
        setPresetsEx();
        setSourceButtons();
        let prevFind = sessionStorage.getItem(sessionKeys.PREV_FIND_SRC);
        if (prevFind != -1) {
            clearPreviousFind(logicalEndTypes.SOURCE);
            let offset = Number(document.getElementById("srcScrollBar").value);
            if (prevFind >= offset && prevFind < (offset + mMaxDisplaySrcs)) {
                highlightLogical(logicalEndTypes.SOURCE, prevFind);
            }
        }
    }

    function onClickSrcScroll(direction){
        const offset = Number(document.getElementById("srcScrollBar").value);
        const srcScrollBar = document.getElementById("srcScrollBar");
        let newOffset = Math.min(Math.max(offset + direction, Number(srcScrollBar.min)), Number(srcScrollBar.max));
        srcScrollBar.value = newOffset;
        handleSrcScroll();
    }

    function handleSelectAllDest(){
        const numDispDest = Number(sessionStorage.getItem(sessionKeys.NUM_DISP_DEST));

        enableUiButton("deselectAllDests");
        enableUiButton("deselectAllDestsMenu");
        if (dbMode !== DBMode_Protect) {
            enableUiButton("captureDestStatus");
            enableUiButton("captureDestStatusMenu");
            enableUiButton("clearDestPresets");
            enableUiButton("clearDestPresetsMenu");
        }
        document.getElementById("selAllDestsButton").value = true;
        for (let i=0; i<numDispDest; i++){
            document.getElementById(logicalEndTypes.DEST+i).style.backgroundColor = "var(--select-bg)";
        }
        let allDests = [];
        for (let i=0; i<mFilteredDests.length; i++){
            allDests.push(mFilteredDests[i].id)
        }
        mSelDests = allDests;
    }

    function handleDeselectAllDest(){
        const numDispDest = Number(sessionStorage.getItem(sessionKeys.NUM_DISP_DEST));

        if (document.getElementById("selAllDestsButton").value){
            disableUiButton("deselectAllDests");
            disableUiButton("deselectAllDestsMenu");
            disableUiButton("captureDestStatus");
            disableUiButton("captureDestStatusMenu");
            disableUiButton("clearDestPresets");
            disableUiButton("clearDestPresetsMenu");
            document.getElementById("selAllDestsButton").value = false;
            for (let i=0; i<numDispDest; i++){
                document.getElementById(logicalEndTypes.DEST+i).style.backgroundColor = "var(--button-bg)";
            }
            mSelDests = [];
        }
    }

    function handleClearPresets(clearType){
        let selectedDests = mAllDests;
        if (clearType == logicalEndTypes.DEST){
            selectedDests = mSelDests;
        }
        clearDestPresets(selectedDests);
    }

    function handleCaptureCheck(captureType) {
        if (captureType == 'dest') {
            document.getElementById("destCaptureName").value = "";
            displayDialog('destCaptureSalvoModal')
        } else if (captureType == 'portType') {
            document.getElementById("portTypeName").value = "";
            displayDialog('portTypeSalvoModal')
        } else {
            document.getElementById("systemCaptureName").value = "";
            displayDialog('systemCaptureSalvoModal');
        }
    }

    function onChangeAddToSelected(enabled) {
        document.getElementById("destCaptureName").disabled = enabled;
    }

    function loadingModalTimeout() {
        return new Promise((resolve) => {
            hideLoadingModalTimeout = setTimeout(() => {
                hideDialog("LoadingModal");
            }, 10000);
        });
    }

    async function hideLoadingModal() {
        await loadingModalTimeout();
    }

    function handleCapture(captureType){
        if (captureType == 'dest') {
            let salvoId = -1;
            if (document.getElementById("addToSelected").checked) {
                salvoId = sessionStorage.getItem(sessionKeys.SELECTED_SALVO_ID);
            }
            let newName = document.getElementById("destCaptureName").value;
            newName = newName.trim();
            if (salvoId == -1 && !validateString(newName)) {
                displayErrorDialog(NameErrorMessage);
                return;
            }
            hideDialog('destCaptureSalvoModal');
            displayDialog("LoadingModal");
            captureInProgress = true;
            const urlParameters = [
                "newName=" + encodeURIComponent(newName),
                "selectedDests=" + mSelDests,
                "panelId=-1",
                "salvoId=" + salvoId
            ];
            $.ajax({url: "/salvo/capturerange?" + urlParameters.join("&"),
                success: () => {
                    hideLoadingModal(); //remove loading modal after 10s if it doesn't get removed by the DS notification
                    captureInProgress = false;
                },
                error: (err) => {
                    displayErrorDialog(err.responseText || JSON.stringify(err));
                    captureInProgress = false;
                }
            });
        } else if (captureType == 'portType') {
            let newName = document.getElementById("portTypeName").value;
            newName = newName.trim();
            if (!validateString(newName)) {
                displayErrorDialog(NameErrorMessage);
                return;
            }
            hideDialog('portTypeSalvoModal');
            displayDialog("LoadingModal");
            captureInProgress = true;
            const urlParameters = [
                "newName= " + encodeURIComponent(newName),
                "portType=" + encodeURIComponent(document.getElementById("portType").value),
                "numDests=" + mDestList.length
            ];
            $.ajax({url: "/salvo/captureports?" + urlParameters.join("&"),
                success: () => {
                    captureInProgress = false;
                    hideLoadingModal(); //remove loading modal after 10s if it doesn't get removed by the DS notification
                },
                error: (err) => {
                    displayErrorDialog(err.responseText || JSON.stringify(err));
                    captureInProgress = false;
                }
            });
        } else {
            let newName = document.getElementById("systemCaptureName").value;
            newName = newName.trim();
            if (!validateString(newName)) {
                displayErrorDialog(NameErrorMessage);
                return;
            }
            hideDialog('systemCaptureSalvoModal');
            displayDialog("LoadingModal");
            captureInProgress = true;
            $.ajax({url: "/salvo/capturesystem?newName=" + encodeURIComponent(newName),
                success: () => {
                    captureInProgress = false;
                    hideLoadingModal(); //remove loading modal after 10s if it doesn't get removed by the DS notification
                },
                error: (err) => {
                    displayErrorDialog(err.responseText || JSON.stringify(err));
                    captureInProgress = false;
                }
            });
        }

    }

    function handleDestFollow(){
        const destFollow = JSON.parse(sessionStorage.getItem(sessionKeys.DEST_FOLLOW));
        if (destFollow == true){
            document.getElementById("destFollow").style.backgroundColor = "var(--button-bg)";
            sessionStorage.setItem(sessionKeys.DEST_FOLLOW, JSON.stringify(false));
            clearSelectedLevels();
        } else {
            document.getElementById("destFollow").style.backgroundColor = "white";
            sessionStorage.setItem(sessionKeys.DEST_FOLLOW, JSON.stringify(true));
            selectAllLevels();
        }
    }

    function selectAllLevels(){
        let selLevels = JSON.parse(sessionStorage.getItem(sessionKeys.SEL_LEVELS));
        let levelList = JSON.parse(sessionStorage.getItem(sessionKeys.LEVEL_LIST));
        for (let i=0; i<levelList.length; i++){
            if (!selLevels.includes(levelList[i].id)){
                clickLevel(levelList[i].id, true);
            }
        }
    }

    function clearSelectedLevels(){
        let selLevels = JSON.parse(sessionStorage.getItem(sessionKeys.SEL_LEVELS));
        if (selLevels){
            for (let i=0; i<selLevels.length; i++){
                document.getElementById("level" + selLevels[i]).style.backgroundColor = "var(--button-bg)";
            }
            sessionStorage.setItem(sessionKeys.SEL_LEVELS, JSON.stringify([]));
        }
    }

    function clickLevel(id, processesDestFollow){
        let selLevels = JSON.parse(sessionStorage.getItem(sessionKeys.SEL_LEVELS));
        let levelList = JSON.parse(sessionStorage.getItem(sessionKeys.LEVEL_LIST));

        let levelData = levelList.filter(obj => {
            return obj.id === id
        })

        if (!selLevels) {
            selLevels = [];
        }

        if (selLevels.length == levelList.length){
            clearSelectedLevels();
            selLevels = [];
        }

        if (selLevels.includes(id)){
            const index = selLevels.indexOf(id);
            if (index > -1) { // only splice array when item is found
                selLevels.splice(index, 1); // 2nd parameter means remove one item only
                document.getElementById("level" + id).style.backgroundColor = "var(--button-bg)";
            }
        } else {
            if (levelData[0]) {
                document.getElementById("level" + id).style.backgroundColor = levelData[0].color;
            }
            selLevels.push(id);
        }
        if (processesDestFollow) {
            if (selLevels.length == levelList.length) {
                document.getElementById("destFollow").style.backgroundColor = "white";
                sessionStorage.setItem(sessionKeys.DEST_FOLLOW, JSON.stringify(true));
            } else {
                document.getElementById("destFollow").style.backgroundColor = "var(--button-bg)";
                sessionStorage.setItem(sessionKeys.DEST_FOLLOW, JSON.stringify(false));
            }
        }

        sessionStorage.setItem(sessionKeys.SEL_LEVELS, JSON.stringify(selLevels.sort(function(a, b) {
            return a - b;
        })));
    }

    function updateLevels(data){
        let levelList = JSON.parse(sessionStorage.getItem(sessionKeys.LEVEL_LIST));
        let selLevels = JSON.parse(sessionStorage.getItem(sessionKeys.SEL_LEVELS));

        if (data.length != levelList.length){
            location.reload();
        } else {
            let colorList = [];
            for (let i=0; i<data.length; i++){
                document.getElementById("level"+data[i].id).innerText = data[i].name;
                if (selLevels.includes(data[i].id)){
                    document.getElementById("level"+data[i].id).style.backgroundColor = data[i].color;
                }
                let index = levelList.map(object => object.id).indexOf(data[i].id);
                levelList[index].color = data[i].color;
                colorList.push(data[i].color);
                sessionStorage.setItem(sessionKeys.LEVEL_LIST, JSON.stringify(levelList));
            }
            SetLevelColors(colorList);
            RefreshCanvas();
        }
    }

    function setFilter() {
        document.getElementById("sourceFilter").value = "";
        handleSourceFilter();
        document.getElementById("destFilter").value = "";
        handleDestFilter();
        displayDialog("filterModal");
    }

    function handleSourceFilter() {
        let filterString = document.getElementById("sourceFilter").value.toLowerCase();
        let filterList = [];
        highlightUIButton ("findButton", (filterString != "") || (document.getElementById("destFilter").value != ""));
        for (let i=0; i<mSrcList.length; i++){
            if (mSrcList[i].name.toLowerCase().includes(filterString)){
                filterList.push(mSrcList[i]);
            }
        }
        mFilteredSrcs = filterList;
        mFilteredSrcIds = Array.from(mFilteredSrcs, (src) => src.id)
        document.getElementById("srcScrollBar").value = 0;
        handleSrcScroll();
        let srcScrollBar = document.getElementById("srcScrollBar");
        srcScrollBar.value = 0;
        const numDispSrc = Number(sessionStorage.getItem(sessionKeys.NUM_DISP_SRC));
        srcScrollBar.max = filterList.length - numDispSrc;
        srcScrollBar.value = 0;
        setSourceButtons();
    }

    function handleDestFilter() {
        let filterString = document.getElementById("destFilter").value.toLowerCase();
        let filterList = [];
        highlightUIButton ("findButton", (filterString != "") || (document.getElementById("sourceFilter").value != ""));
        for (let i=0; i<mDestList.length; i++){
            if (mDestList[i].name.toLowerCase().includes(filterString)){
                filterList.push(mDestList[i]);
            }
        }
        mFilteredDests = filterList;
        document.getElementById("dstScrollBar").value = 0;
        handleDstScroll();
        const numDispDst = Number(sessionStorage.getItem(sessionKeys.NUM_DISP_SRC));
        let dstScrollBar = document.getElementById("dstScrollBar");
        dstScrollBar.max = filterList.length - numDispDst;
        dstScrollBar.value = 0;
        setDestButtons();
    }

    function getFindStart(listType, direction){
        if (listType == logicalEndTypes.DEST){
            let prevFindDest = Number(sessionStorage.getItem(sessionKeys.PREV_FIND_DEST));
            let selection = mSelDests;
            if (prevFindDest != -1){
                return prevFindDest + direction;
            } else if (selection.length > 0){
                return Array.min(selection) + direction;
            }
            return Number(document.getElementById("dstScrollBar").value);
        } else {
            let prevFindSrc = Number(sessionStorage.getItem(sessionKeys.PREV_FIND_SRC));
            if (prevFindSrc != -1){
                return prevFindSrc + direction;
            }
            return Number(document.getElementById("srcScrollBar").value);
        }

        return 0;
    }

    function wrapIndex(index, listLength){
        if (index < 0){
            return listLength - 1;
        } else if (index >= listLength){
            return 0;
        }
        return index;
    }

    function getScrollOffset(location, listLength, numDisplayed){
        return (location < numDisplayed) ? 0 : Math.floor(location / numDisplayed);
    }

    function findItem(findName, itemList, type, direction, startIndex, exactMatch, matchCase){
        startIndex = wrapIndex(startIndex, itemList.length);
        let found = false;
        let wrapped = false;
        let currentIndex = startIndex;
        let offset = -1;
        let findNameLowercase = findName.toLowerCase();
        while (!wrapped){
            let name = itemList[currentIndex].name;
            if (exactMatch) {
                if (findName == name.trim()) {
                    found = true;
                    break;
                }
            } else {
                if (matchCase) {
                    if (name.includes(findName)) {
                        found = true;
                        break;
                    }
                } else {
                    if (name.toLowerCase().includes(findNameLowercase)){
                        found = true;
                        break;
                    }
                }
            }
            currentIndex += direction;
            currentIndex = wrapIndex(currentIndex, itemList.length);
            if (currentIndex == startIndex){
                wrapped = true;
            }
        }

        if (found) {
            offset = getScrollOffset(currentIndex, itemList.length, ((type == "Destination") ? mMaxDisplayDests : mMaxDisplaySrcs));
        }
        return {"found": found, "offset": offset, "index": currentIndex};
    }

    function handleFind(findType, findDirection){
        let foundData;
        let find = document.getElementById(findType + "FindString").value;
        find = find.trim();
        let exactMatch = document.getElementById(findType + "ExactMatch").checked;
        let matchCase = document.getElementById(findType + "MatchCase").checked;
        let startIndex = getFindStart(findType, findDirection);
        if (findType == logicalEndTypes.DEST){
            document.getElementById("destNotFoundLabel").innerText = " ";
            foundData = findItem(find, mFilteredDests, findType, findDirection, startIndex, exactMatch, matchCase);
            if (foundData.found){
                clearPreviousFind(logicalEndTypes.DEST);
                let offset = Number(document.getElementById("dstScrollBar").value);
                if (foundData.index < offset || foundData.index >= (offset + mMaxDisplayDests)) {
                    goToDestPage(foundData.index);
                }
                highlightLogical(logicalEndTypes.DEST, foundData.index);
                sessionStorage.setItem(sessionKeys.PREV_FIND_DEST, foundData.index);
            } else {
                document.getElementById("destNotFoundLabel").innerText = "No destination found named " + find;
            }
        } else {
            document.getElementById("sourceNotFoundLabel").innerText = " ";
            foundData = findItem(find, mFilteredSrcs, findType, findDirection, startIndex, exactMatch, matchCase);
            if (foundData.found){
                clearPreviousFind(logicalEndTypes.SOURCE);
                let offset = Number(document.getElementById("srcScrollBar").value);
                if (foundData.index < offset || foundData.index >= (offset + mMaxDisplaySrcs)) {
                    goToSourcePage(foundData.index);
                }
                highlightLogical(logicalEndTypes.SOURCE, foundData.index);
                sessionStorage.setItem(sessionKeys.PREV_FIND_SRC, foundData.index);
            } else {
                document.getElementById("sourceNotFoundLabel").innerText = "No source found named " + find;
            }
        }
    }

    function handleGoTo(destId) {
        let salvoData = mSalvoCache.get(destId);
        if (salvoData) {
            let offset = Number(document.getElementById("srcScrollBar").value);
            let sources = Array.from(salvoData.values()).sort((a, b) => a.srcId - b.srcId);
            for (const source of sources) {
                let sourceIndex = mFilteredSrcs.findIndex((src) => src.id == source.srcId);
                if (sourceIndex > offset && offset != Number(document.getElementById("srcScrollBar").max)) {
                    goToSourcePage(sourceIndex);
                    return;
                }
            }
            goToSourcePage(mFilteredSrcs.findIndex((src) => src.id == sources[0].srcId));
        }
    }

    function cancelFind() {
        setFilter();
        clearFind(logicalEndTypes.DEST);
        clearFind(logicalEndTypes.SOURCE);
    }

    function clearPreviousFind(type) {
        let prevFind, numDisp;
        if (type == logicalEndTypes.DEST) {
            prevFind = sessionStorage.getItem(sessionKeys.PREV_FIND_DEST);
            numDisp = sessionStorage.getItem(sessionKeys.NUM_DISP_DEST);
        } else {
            prevFind = sessionStorage.getItem(sessionKeys.PREV_FIND_SRC);
            numDisp = sessionStorage.getItem(sessionKeys.NUM_DISP_SRC);
        }
        if (prevFind != -1){
            for (let i=0; i<numDisp; i++) {
                document.getElementById(type + i).style.borderColor = "var(--transparent)";
            }
        }
    }

    function highlightLogical(type, index){
        const offset = (type == logicalEndTypes.DEST) ? document.getElementById("dstScrollBar").value : document.getElementById("srcScrollBar").value;
        let nextId = Number(index) - Number(offset)
        document.getElementById(type + nextId).style.borderColor = "var(--select-bg)";
    }

    function clearFind(type){
        let prevFind;
        if (type == logicalEndTypes.DEST) {
            prevFind = sessionStorage.getItem(sessionKeys.PREV_FIND_DEST);
            sessionStorage.setItem(sessionKeys.PREV_FIND_DEST, String(-1));
            document.getElementById("destFindString").value = ""
        } else {
            prevFind = sessionStorage.getItem(sessionKeys.PREV_FIND_SRC);
            sessionStorage.setItem(sessionKeys.PREV_FIND_SRC, String(-1));
            document.getElementById("sourceFindString").value = "";
        }
        if (prevFind != -1) {
            clearPreviousFind(type);
        }
    }

    $('#findDropdown').on('hide.bs.dropdown', function () {
        document.getElementById("sourceNotFoundLabel").innerText = " ";
        document.getElementById("destNotFoundLabel").innerText = " ";
    });

    function handleSalvoModeChange(eventData) {
        dbMode = eventData.detail.dbMode;
        if (eventData.detail.dbMode == DBMode_Protect) {
            disableButtonIds([
                "addSalvo",
                "addSalvoMenu",
                "duplicateSalvo",
                "duplicateSalvoMenu",
                "removeSalvo",
                "removeSalvoMenu",
                "captureStatus",
                "captureSystemStatus",
                "captureSystemStatusMenu",
                "captureDestStatus",
                "captureDestStatusMenu",
                "capturePipStatus",
                "capturePipStatusMenu",
                "clearPresets",
                "clearAllPresetsMenu",
                "clearDestPresetsMenu"
            ]);
        } else {
            enableButtonIds(["addSalvo", "addSalvoMenu", "captureStatus", "clearPresets"]);
        }
    }

    function handleUpdatedSalvoCache(msg, data) {
        clearTimeout(hideLoadingModalTimeout);
        let updatedSalvoIds = [];
        switch (msg.operation) {
            case INSERT_OP:
                updatedSalvoIds = updateCurrentSalvoCache(data.mappings);
                break;
            case UPDATE_OP:
                updatedSalvoIds = updateCurrentSalvoCache(data.mappings);
                break;
            case DELETE_OP:
                updatedSalvoIds = clearMappingsFromSalvoCache(msg.rowIds);
                break;
        }
        let rows = [];
        salvosGridOptions.api.forEachNode((node) => {
            if (updatedSalvoIds.includes(node.data.id)) {
                rows.push(node);
            }
        });
        salvosGridOptions.api.redrawRows({rowNodes: rows});
        hideDialog("LoadingModal");
    }

    function handleChangedSalvoMappings(msg) {
        if (msg.rowIds.length < 100) {
            $.post("/salvo/mappings/getByIds?", {ids: msg.rowIds.toString()}).done((data) => {
                handleUpdatedSalvoCache(msg, data)
            });
        } else {
            hideDialog("LoadingModal");
            displayProgressBar("Updating Salvo", "Updating salvo", function (guid) {
                $.post("/salvo/mappings/getByIds?" + getProgressBarURLParameter(guid), {ids: msg.rowIds.toString()}).done((data) => {
                    handleUpdatedSalvoCache(msg, data)
                });
            })
        }
    }

    function updateUiIdBase(baseNumber) {
        uiidBase = baseNumber;
        salvosGridOptions.api.redrawRows();
    }

    function handleAutoMap(autoMap) {
        displayConfirmationDialog(
            autoMap.confirmationMessage,
            "Apply",
            autoMap.confirmationCallback,
            autoMap.confirmationTitle,
            autoMap.confirmationIcon + " icon-white"
        );
    }

    function addWSDBListener() {
        let 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);

            switch (msg.table) {
            case DATABASE_TABLE:
                handleDatabaseTableChange(msg, () => {
                    location.reload();
                });
                break;
            case SALVO_TABLE:
                fetch('/salvo/agdata')
                    .then((response) => response.json())
                    .then((data) => {
                        const selectedNodes = salvosGridOptions.api.getSelectedNodes();
                        let firstSelectedNodeIndex = 0;
                        if (selectedNodes.length > 0) {
                            firstSelectedNodeIndex = salvosGridOptions.api.getSelectedNodes()[0].rowIndex;
                        }
                        let salvosChanged = data.length != salvosGridOptions.api.getDisplayedRowCount();
                        if (!salvosChanged) {
                            salvosGridOptions.api.forEachNode((node, index) => {
                                if (JSON.stringify(node.data) !== JSON.stringify(data[index])) {salvosChanged = true}
                            });
                        }
                        if (salvosChanged){
                            salvosGridOptions.api.setRowData(data)
                        }
                        if (msg.operation === INSERT_OP){
                            let rowCount = salvosGridOptions.api.getDisplayedRowCount();
                            salvosGridOptions.api.forEachNode((node) => {
                                if (node.rowIndex == rowCount - 1) {
                                    node.setSelected(true, true);
                                }
                            });
                            salvosGridOptions.api.ensureIndexVisible(rowCount - 1, 'bottom')
                        } else {
                            let rowCount = salvosGridOptions.api.getDisplayedRowCount();
                            if (firstSelectedNodeIndex < rowCount) {
                                salvosGridOptions.api.forEachNode((node) => {
                                    if (node.rowIndex == firstSelectedNodeIndex) {
                                        node.setSelected(true, true);
                                    }
                                });
                                salvosGridOptions.api.ensureIndexVisible(firstSelectedNodeIndex, null)
                            } else {
                                salvosGridOptions.api.forEachNode((node) => {
                                    if (node.rowIndex == rowCount - 1) {
                                        node.setSelected(true, true);
                                    }
                                });
                                salvosGridOptions.api.ensureIndexVisible(rowCount - 1, 'bottom')
                            }
                        }
                        if (!document.getElementById("view").hidden) {
                            refreshSalvoView();
                        }
                    });
                    break;
                case SALVO_MAPPING_TABLE:
                    handleChangedSalvoMappings(msg);
                    if (!document.getElementById("view").hidden) {
                        refreshSalvoView();
                    }
                    break;
                case LEVEL_TABLE:
                    fetch('/level/agdata')
                        .then((response) => response.json())
                        .then((data) => {
                            updateLevels(data);
                        });
                    break;
                case SOURCE_TABLE:
                case DESTINATION_TABLE:
                    location.reload();
                    break;
                case UIID_BASE_NUMBER:
                    getUIIDBaseSetting(updateUiIdBase);
                    break;
            }
        };
        socket.onerror = function(event) {
            console.error("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>

{{ template "progressbar" . }}

{{ end }}