{{define "content"}}
<link href="/static/css/pages/network-clock.css" rel="stylesheet">
<div class="grid-container">
    <div class="splitBorder">
        <div class="net-settings-height">
            <nav class="header">
                <div>Network Settings</div>
            </nav>
            <table class="container-data" style="margin-bottom: 0;">
                <tbody>
                <tr class="row-data">
                    <td class="col-data-label col-85">
                        IP Mode:
                    </td>
                    <td class="col-data-input">
                        <input class="form-check-input" type="radio" onchange="" value="0" id="IPModeStatic" name="IPMode" checked>
                    </td>
                    <td class="col-data-label-after col-80" for="IPModeStatic">&nbsp;&nbsp;Static</td>
                    <td class="col-data-input">
                        <input class="form-check-input col-data-label-after" type="radio" onchange="" value="1" id="IPModeStaticDHCP" name="IPMode">
                    </td>
                    <td class="col-data-label-after col-80" for="IPModeStaticDHCP">&nbsp;&nbsp;Static DHCP</td>
                </tr>
                </tbody>
            </table>
            <table class="container-data" style="margin-top: 0;">
                <tbody>
                <tr class="row-data">
                    <td class="col-data-label col-85">
                        Address:
                    </td>
                    <td class="col-data-input">
                        <input class="form-control rounded-0 ip-address-size" type="text" id="address">
                    </td>
                </tr>
                <tr class="row-data">
                    <td class="col-data-label col-85">
                        Subnet Mask:
                    </td>
                    <td class="col-data-input">
                        <input class="form-control rounded-0 ip-address-size" type="text" id="subnetMask">
                    </td>
                </tr>
                <tr class="row-data">
                    <td class="col-data-label col-85">
                        Gateway:
                    </td>
                    <td class="col-data-input">
                        <input class="form-control rounded-0 ip-address-size" type="text" id="gateway">
                    </td>
                </tr>
                <tr class="row-data">
                    <td class="col-data-label col-85">
                        MAC Address:
                    </td>
                    <td class="col-data-input">
                        <input class="form-control rounded-0" type="text" id="macAddress" readonly>
                    </td>
                </tr>
                </tbody>
            </table>
            <table class="container-data">
                <tbody>
                <tr class="row-data">
                    <td class="col-data-label col-85">
                        Active ENET:
                    </td>
                    <td class="col-data-input">
                        <input class="form-control rounded-0" type="text" id="activeEnet" readonly>
                    </td>
                </tr>
                <tr class="row-data">
                    <td class="col-data-label col-85">
                        ENET 1 Link:
                    </td>
                    <td class="col-data-input" style="width: 250px;">
                        <input class="form-control rounded-0" type="text" id="enet1Link" onchange="" readonly>
                    </td>
                </tr>
                <tr class="row-data">
                    <td class="col-data-label col-85">
                        ENET 2 Link:
                    </td>
                    <td class="col-data-input" style="width: 250px;">
                        <input class="form-control rounded-0" type="text" id="enet2Link" onchange="" readonly>
                    </td>
                </tr>
                </tbody>
            </table>
            <div class="modal-footer layout-footer justify-content-between" id="applyCancelDiv">
                <button class="btn btn-text btn-outline-secondary" id="cancelButton" onclick="onCancelSettings();">Cancel</button>
                <button class="btn btn-text" id="applyButton" onclick="confirmApplySettings();">Apply</button>
            </div>
        </div>
        <div class="permitted-clients-height">
            <nav class="header header-style">
                <div>Permitted Clients</div>
            </nav>
            <nav class="navbar navbar-expand">
                <div>
                    <ul class="navbar-nav me-auto">
                        <li class="nav-item dropdown">
                            <button onclick="" class="btn btn-nav-icon" id="" 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="matrixMenuImage"></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="displayDialog('addClientModal');" id=""><i class="icon-btn-nav-menu icon-add" id=""></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="openEditClientAddress();" id=""><i class="icon-btn-nav-menu icon-edit" id=""></i>Edit</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="displayRemoveDialog();" id=""><i class="icon-btn-nav-menu icon-delete" id=""></i>Delete</button>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <span><i class="icon-separator"></i></span>
                        </li>
                        <li>
                            <button class="btn btn-nav-icon" onclick="displayDialog('addClientModal');" id="" data-toggle="tooltip" data-placement="bottom" title="Select All"><i class="icon-btn icon-add" id=""></i></button>
                        </li>
                        <li>
                            <button class="btn btn-nav-icon" onclick="openEditClientAddress();" id="" data-toggle="tooltip" data-placement="bottom" title="Deselect All"><i class="icon-btn icon-edit" id=""></i></button>
                        </li>
                        <li>
                            <button class="btn btn-nav-icon" onclick="displayRemoveDialog();" id="" data-toggle="tooltip" data-placement="bottom" title="Deselect All"><i class="icon-btn icon-delete" id=""></i></button>
                        </li>
                    </ul>
                </div>
            </nav>
            <div id="permittedClientAgGrid" class="ag-theme-balham-dark" style="height:70%;">
            </div>
            <div class="modal-footer layout-footer justify-content-between" id="pcApplyCancelDiv">
                <button class="btn btn-text btn-outline-secondary" id="pcCancelButton" onclick="onCancelClientsSettings();">Cancel</button>
                <button class="btn btn-text" id="pcApplyButton" onclick="onApplyClientsSettings();">Apply</button>
            </div>
        </div>
    </div>
    <div>
        <nav class="header">
            <div>Clock</div>
        </nav>
        <table class="container-data-after-title">
            <tbody>
            <tr class="row-data">
                <td class="col-data-label col-150">Current Date and Time:</td>
                <td class="col-data-input"><i class="icon-plain icon-clock" id="currentTimeIcon"></i>
                    <input class="form-control rounded-0" style="width: 350px;" type="text" id="time" name="currentTime" readonly>
                </td>
            </tr>
            </tbody>
        </table>
        <nav class="header-with-icon">
            <table>
                <tbody>
                <tr class="row-data">
                    <td><i class="icon-clock"></i></td>
                    <td>Local Time</td>
                </tr>
                </tbody>
            </table>
        </nav>
        <table class="container-data-after-title clock-section">
            <tbody>
            <tr class="row-data">
                <td>
                    <button class="btn btn-text" id="btnSetPcTime" onclick="systemResetToClientPCTime();">Set to PC Time</button>
                </td>
            </tr>
            </tbody>
        </table>
        <nav class="header-with-icon">
            <table>
                <tbody>
                <tr class="row-data">
                    <td><i class="icon-utc"></i></td>
                    <td>UTC Time</td>
                </tr>
                </tbody>
            </table>
        </nav>
        <table class="container-data-after-title clock-section">
            <tbody>
            <tr class="row-data">
                <td class="col-data-label text-nowrap">
                    Use Daylight Savings Time:
                </td>
                <td class="col-data-input">
                    <input class="form-check-input" type="checkbox" value="1" id="dayLightCheckbox">
                </td>
            </tr>
            <tr class="row-data">
                <td class="col-data-label text-nowrap">UTC Offset:</td>
                <td class="col-data-input">
                    <div class="select-wrapper" id="utcOffsetSelect">
                        <select class="custom-select" name="" id="utcOffset">
                        </select>
                    </div>
                </td>
            </tr>
            <tr class="row-data">
                <td class="space-top" colspan="2">
                    <button class="btn btn-text" id="btnUndoUtcOffset">Undo Changes</button>
                    <button class="btn btn-text" id="btnSetUtcOffset">Set UTC Offset</button>
                </td>
            </tr>
            </tbody>
        </table>
        <div id="ntpTimeSection">
            <nav class="header-with-icon">
                <table>
                    <tbody>
                    <tr class="row-data">
                        <td><i class="icon-ntp"></i></td>
                        <td>NTP Time</td>
                    </tr>
                    </tbody>
                </table>
            </nav>
            <table class="container-data clock-section">
                <tbody>
                <tr class="row-data">
                    <td colspan="2">
                        <div id="ntpServerAgGrid" class="ag-theme-balham-dark"></div>
                    </td>
                </tr>
                <tr class="row-data">
                    <td class="col-data-label col-85">NTP Enabled:</td>
                    <td class="col-data-input" colspan="2"><input class="form-check-input" type="checkbox" value="1" id="ntpEnabled"></td>
                </tr>
                <tr class="row-data">
                    <td class="col-data-input space-top" colspan="2">
                        <button class="btn btn-text" id="btnUndoNtpChanges">Undo Changes</button>
                        <button class="btn btn-text" id="btnSetNtp">Set NTP</button>
                    </td>
                </tr>
                <tr>
                    <td class="space-top" colspan="2">
                        With NTP enabled, if both NTP servers are left as 0.0.0.0 then the NTP server will default to the connected BCS controller.
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>


<div class="modal" id="addClientModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="addClientModalLabel"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="addClientModalLabel"><i class="icon-add icon-white"></i>Add Client</span>
                <span class="btn btn-transparent" onclick="hideDialog('addClientModal');"><i class="icon-close-header"></i></span>
            </div>
            <div class="modal-body">
                <table class="container-data">
                    <tr class="row-data">
                        <td class="col-data-label col-70">IP Address:</td>
                        <td class="col-data-input"><input class="form-control rounded-0 ip-address-size" name="ipAddress" id="ipAddress" tabindex="4" oninput=""/></td>
                    </tr>
                </table>
                <p class="container-data content-margin">
                    Note that the changes will take effect only after you click the Apply button.
                </p>
                <div class="modal-footer justify-content-between">
                    <button class="btn btn-text btn-outline-secondary" tabindex="10" onclick="hideDialog('addClientModal')">Cancel</button>
                    <button class="btn btn-text" tabindex="9" onclick="addClientAddress()">Apply</button>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal" id="editClientModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="editClientModalLabel"aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-add-level-size">
        <div class="modal-content">
            <div class="modal-header justify-content-between">
                <span class="modal-title" id="editClientModalLabel"><i class="icon-edit icon-white"></i>Edit Client</span>
                <span class="btn btn-transparent" onclick="hideDialog('editClientModal');"><i class="icon-close-header"></i></span>
            </div>
            <div class="modal-body">
                <table class="container-data">
                    <tr class="row-data">
                        <td class="col-data-label col-70">IP Address:</td>
                        <td class="col-data-input"><input class="form-control rounded-0 name-size" name="ipAddress" id="ipAddressEdit" tabindex="4" oninput=""/></td>
                    </tr>
                </table>
                <p class="container-data content-margin">
                    Note that the changes will take effect only after you click the Apply button.
                </p>
                <div class="modal-footer justify-content-between">
                    <button class="btn btn-text btn-outline-secondary" tabindex="10" onclick="hideDialog('editClientModal')">Cancel</button>
                    <button class="btn btn-text" tabindex="9" onclick="editClientAddress()">Apply</button>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal" id="removeClientModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="removeClientModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-remove-level-size">
        <div class="modal-content">
            <div class="modal-header info-header justify-content-between">
                <span class="modal-title" id="removeClientModalLabel"><i class="icon-delete icon-white"></i>Confirm Delete Client</span>
                <span class="btn btn-transparent" onclick="hideDialog('removeClientModal');"><i class="icon-close-header"></i></span>
            </div>
            <div class="modal-body">
                <label class="container-data">
                    Deleting the highlighted IP addresses.  Are you sure you want to continue?<br><br>
                </label>
            </div>
            <div class="modal-footer justify-content-between">
                <button class="btn btn-text btn-outline-secondary"  tabindex="1" onclick="hideDialog('removeClientModal')">Cancel</button>
                <button  class="btn btn-text" tabindex="0" onclick="removeClient();">Apply</button>
            </div>
        </div>
    </div>
</div>

<script src="/static/js/frameui/frameuiCommon.js"></script>
<script src="/static/js/system-pages/network-clock.js"></script>
<script type="text/javascript">
    window.onload = async () => {
        setTimezoneChoices();
        await initData();
        initWebSocket();
        initializeAgGridTables();
        try {
            ["IPModeStatic","IPModeStaticDHCP"].forEach(id => document.getElementById(id)?.addEventListener('change', applyIPModeReadonlyState));
            // NTP enable changes are staged; API call is done on Set NTP
            applyIPModeReadonlyState();
        } catch(e) { console.error(e); }
    }
</script>
{{end}}