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

<div class="row full-page">
    <div class="row" id="redundancyStatus">
        <nav class="navbar navbar-redundancy" id="redundancyStatusToolbar">
            <div>BCS Redundant Status</div>
        </nav>
        <div class="row full-height">
            <div class="row row-enable-redundancy">
                <table class="container-data">
                    <tr class="row-data">
                        <td class="col-data-label">Enable Redundancy</td>
                        <td class="col-data-input"><input class="form-check-input" type="checkbox" id="enableRedundancy" onchange="updateRedundancyStatus()"></td>
                    </tr>
                </table>
            </div>
            <div class="grid-wrapper redundant-status-div" id="redundantStatusTable">
                <div id="redundantStatusGrid" class="ag-theme-balham-dark full-height"></div>
            </div>
            <div class="row pairing-details" id="pairingDetailsTable">
                <div>
                    <p class="title">Paring Details</p>
                </div>
                <div class="pairing-details-area">
                    <table class="container-data-redundant-pairing-details">
                        <tr class="row-data">
                            <td class="col-data-label"><div id="pairDetailIcon1" class="loading-cell"></div></td>
                            <td class="col-data-label-pairing-details" id="pairDetail1">Test public IP connection to 10.10.10.102</td>
                        </tr>
                        <tr class="row-data">
                            <td class="col-data-label"><div id="pairDetailIcon2" class="loading-cell"></div></td>
                            <td class="col-data-label-pairing-details" id="pairDetail2">Enable ETH 2 ethernet port on 10.10.10.101</td>
                        </tr>
                        <tr class="row-data">
                            <td class="col-data-label"><div id="pairDetailIcon3" class="loading-cell"></div></td>
                            <td class="col-data-label-pairing-details" id="pairDetail3">Enable ETH 2 ethernet port on 10.10.10.102</td>
                        </tr>
                        <tr class="row-data">
                            <td class="col-data-label"><div id="pairDetailIcon4" class="loading-cell"></div></td>
                            <td class="col-data-label-pairing-details" id="pairDetail4">Test private connection to 10.10.10.102</td>
                        </tr>
                        <tr class="row-data">
                            <td class="col-data-label"><div id="pairDetailIcon5" class="loading-cell"></div></td>
                            <td class="col-data-label-pairing-details" id="pairDetail5">Exchange keys</td>
                        </tr>
                        <tr class="row-data">
                            <td class="col-data-label"><div id="pairDetailIcon6" class="loading-cell"></div></td>
                            <td class="col-data-label-pairing-details" id="pairDetail6">Configure dataservice for database replication</td>
                        </tr>
                        <tr class="row-data">
                            <td class="col-data-label"><div id="pairDetailIcon7" class="loading-cell"></div></td>
                            <td class="col-data-label-pairing-details" id="pairDetail7">Enable redundancy on 10.10.10.102</td>
                        </tr>
                        <tr class="row-data">
                            <td class="col-data-label"><div id="pairDetailIcon8" class="loading-cell"></div></td>
                            <td class="col-data-label-pairing-details" id="pairDetail8">Perform initial database synchronization to 10.10.10.102</td>
                        </tr>
                    </table>
                </div>
                <div class="redundant-paring-div">
                    <button class="btn btn-right" id="copyPairingDetailButton">Copy pairing details to clipboard</button>
                </div>
            </div>
            <div class="row failover-details" id="failoverDetailsTable">
                <div>
                    <p class="title">Failover Details</p>
                </div>
                <div>
                    <div class="redundant-filter-div">
                        <input class="form-control rounded-0" type="search" placeholder="Filter" aria-label="Filter" id="levelFilterInput" oninput="onLevelFilterTextBoxChanged()">
                        <span class="btn btn-nav-icon"><i class="icon-filter"></i></span>
                    </div>
                </div>
                <div class="failover-details-area">
                    <table class="container-data-redundant-pairing-details">
                    </table>
                </div>
                <div class="redundant-paring-div">
                    <button class="btn btn-right" id="copyFailoverDetailButton">Copy failover details to clipboard</button>
                </div>
            </div>
        </div>
    </div>
    <div class="row row-redundancy-event" id="redundancyEvent">
        <div class="row half-page">
            <nav class="navbar navbar-redundancy">
                <div>Health Status</div>
            </nav>
            <div class="grid-wrapper full-page" id="healthStatusTable">
                <div id="healthStatusGrid" style="height: 100%;" class="ag-theme-balham-dark"></div>
            </div>
        </div>
        <div class="row half-page">
            <nav class="navbar navbar-redundancy">
                <div>Event Viewer</div>
            </nav>
            <div class="grid-wrapper full-page" id="eventViewerTable">
                <div id="eventViewerGrid" style="height: 100%;" class="ag-theme-balham-dark"></div>
            </div>
        </div>
    </div>
</div>
<script src="/static/js/keystrokeHandling.js"></script>

<script type="text/javascript" charset="utf-8">
    const enableRedundancyColumnDefs = [
        {field: "Name"},
        {field: "Ip", headerName: "IP Address"},
    ];

    const redundantStatusColumnDefs = [
        {field: "Name"},
        {field: "Ip", headerName: "IP Address"},
        {field: "Health"},
        {field: "Status"},
    ];

    const redundantEventColumnDefs = [
        {field: "Severity"},
        {field: "Name"},
        {field: "Action"},
        {field: "Time", headerName: "Date/Time"},
    ];

    var enableRedundancyGridOptions = {
        defaultColDef: {
            resizable: true,
            flex: 1,
        },
        columnDefs: enableRedundancyColumnDefs,
        suppressMenuHide: true,
        headerHeight: 36,
        rowHeight: 31,
    }

    var redundantStatusGridOptions = {
        defaultColDef: {
            flex: 1,
            resizable: true,
            sortable: true,
        },
        columnDefs: redundantStatusColumnDefs,
        suppressMenuHide: true,
        headerHeight: 36,
        rowHeight: 31,
    }

    var eventViewerGridOptions = {
        defaultColDef: {
            flex: 1,
            resizable: true,
            sortable: true,
        },
        columnDefs: redundantEventColumnDefs,
        suppressMenuHide: true,
        headerHeight: 36,
        rowHeight: 31,
    }

    var healthStatusGridOptions = {
        defaultColDef: {
            flex: 1,
            resizable: true,
            sortable: true,
        },
        columnDefs: redundantEventColumnDefs,
        suppressMenuHide: true,
        headerHeight: 36,
        rowHeight: 31,
    }

    document.addEventListener('DOMContentLoaded', function () {// setup the grids after the page has finished loading
        var enableRedundancyDiv = document.querySelector('#enableRedundancyGrid');
        var enableRedundancyGrid = new agGrid.Grid(enableRedundancyDiv, enableRedundancyGridOptions);
        document.getElementById("enableRedundancyGrid").ag_grid = enableRedundancyGrid;
        var redundantStatusDiv = document.querySelector('#redundantStatusGrid');
        var redundantStatusGrid = new agGrid.Grid(redundantStatusDiv, redundantStatusGridOptions);
        document.getElementById("redundantStatusGrid").ag_grid = redundantStatusGrid;
        var healthStatusDiv = document.querySelector('#healthStatusGrid');
        var healthStatusGrid = new agGrid.Grid(healthStatusDiv, healthStatusGridOptions);
        document.getElementById("healthStatusGrid").ag_grid = healthStatusGrid;
        var eventViewerDiv = document.querySelector('#eventViewerGrid');
        var eventViewerGrid = new agGrid.Grid(eventViewerDiv, eventViewerGridOptions);
        document.getElementById("eventViewerGrid").ag_grid = eventViewerGrid;
    });

    function updateRedundancyStatus() {
        let enableRedundancy = document.getElementById("enableRedundancy").checked;
        if (enableRedundancy) {
            displayDialog("enableRedundancyModal");
        } else {
            hideRedundancyStatus();
        }
    }

    function enableRedundancy() {
        hideDialog("enableRedundancyModal");
        showSuccessRedundancyStatus();
        //showFailoverRedundancyStatus();
    }

    function cancelEnableRedundancy() {
        hideDialog('enableRedundancyModal');
        document.getElementById("enableRedundancy").checked = false;
    }

    function showSuccessRedundancyStatus() {
        showRedundancyConfirmDialog();
        document.getElementById("redundancyStatus").style.width = "50%";
        document.getElementById("redundancyEvent").style.width = "50%";
        document.getElementById("redundancyEvent").style.display = "block";
        document.getElementById("redundantStatusTable").style.visibility = "visible";
        document.getElementById("pairingDetailsTable").style.visibility = "visible";
        document.getElementById("pairingDetailsTable").style.display = "block";
        document.getElementById("failoverDetailsTable").style.display = "none";
    }

    function showFailoverRedundancyStatus() {
        document.getElementById("redundancyStatus").style.width = "50%";
        document.getElementById("redundancyEvent").style.width = "50%";
        document.getElementById("redundancyEvent").style.display = "block";
        document.getElementById("redundantStatusTable").style.visibility = "visible";
        document.getElementById("pairingDetailsTable").style.visibility = "hidden";
        document.getElementById("pairingDetailsTable").style.display = "none";
        document.getElementById("failoverDetailsTable").style.display = "block";
    }

    function hideRedundancyStatus() {
        document.getElementById("redundancyStatus").style.width = "100%";
        document.getElementById("redundancyEvent").style.width = "0%";
        document.getElementById("redundancyEvent").style.display = "none";
        document.getElementById("redundantStatusTable").style.visibility = "hidden";
        document.getElementById("pairingDetailsTable").style.visibility = "hidden";
        document.getElementById("pairingDetailsTable").style.display = "block";
        document.getElementById("failoverDetailsTable").style.display = "none";
        for (let i = 1; i <= 8; i++) {
            let detailIcon = document.getElementById("pairDetailIcon" + i);
            if (!detailIcon.classList.contains('loading-cell')) {
                detailIcon.classList.add('loading-cell');
            }
            if (detailIcon.classList.contains('icon-check-cell')) {
                detailIcon.classList.remove('icon-check-cell');
            }
        }
    }

    function showRedundancyConfirmDialog() {
        let message = 'The BCS pairing operation was successfully completed. To finish the setup you need to: <br><br>' +
            '1. Power down both BCS 1 and BCS 2<br>' +
            '2. Remove BCS 1 node from Dashboard Tree View<br>' +
            '3. Power up both BCS 1 and BCS 2<br>' +
            '4. Add redundant BCS unit to Dashboard using 10.10.10.103';
        document.getElementById("redundancyConfirmMessage").innerHTML = message;
        displayDialog("RedundancyConfirmModal");
    }
</script>

<div class="modal" id="enableRedundancyModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="enableRedundancyModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-enable-redundancy-size">
        <div class="modal-content">
            <div class="modal-header justify-content-between">
                <span class="modal-title" id="enableRedundancyModalLabel"><i class="icon-redundancy icon-white"></i>Enable Redundancy</span>
                <span class="btn btn-transparent" onclick="cancelEnableRedundancy()"><i class="icon-close-header"></i></span>
            </div>
            <div class="modal-body">
                <div class="container-data" >
                    <div class="grid-wrapper-enable-redundancy" id="enableRedundancyTable">
                        <div id="enableRedundancyGrid" style="height: 100%;" class="ag-theme-balham-dark"></div>
                    </div>
                </div>
            </div>
            <div class="modal-footer justify-content-between">
                <button class="btn btn-text btn-outline-secondary" tabindex="1" onclick="cancelEnableRedundancy()">Cancel</button>
                <button class="btn btn-text" tabindex="0" onclick="enableRedundancy()">Add</button>
            </div>
        </div>
    </div>
</div>

<div class="modal" id="RedundancyConfirmModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" 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"><i class="icon-redundancy icon-white"></i>Enable Redundancy</span>
                <span class="btn btn-transparent" onclick="hideDialog('RedundancyConfirmModal');"><i class="icon-close-header"></i></span>
            </div>
            <div class="modal-body-redundancy-confirmation">
                <p class="container-data" id="redundancyConfirmMessage"></p>
            </div>
            <div class="modal-footer justify-content-between">
                <button class="btn btn-text btn-outline-secondary" onclick="hideDialog('RedundancyConfirmModal');">Close</button>
            </div>
        </div>
    </div>
</div>
{{ end }}