{{ define "content" }}
<link href="/static/css/pages/ip.css" rel="stylesheet">
<script src="/static/js/splitPane.js"></script>

<div class="full-size">
    <div id="topPane" class="vertical-split-pane" style="height:100%;">
        <nav class="navbar navbar-expand-md">
            <span class=" btn btn-nav-icon-text navbar-toggler" role="button" data-bs-toggle="collapse"
                  data-bs-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false"
                  aria-label="Toggle navigation">
                <i class="icon-menu"></i>Menu
            </span>
            <div class="collapse navbar-collapse" id="navbarToggler">
                <ul class="navbar-nav me-auto mb-lg-0">
                    <li>
                        <input type="checkbox" class="btn-check" id="showDetail" onclick="showHideNmosDetails()" disabled>
                        <label class="btn btn-nav-icon-text" for="showDetail"><i class='icon-page-details'></i>Details</label>
                    </li>
                    <li>
                        <button id="nmos_reload_button" onclick="onNmosReload()" class="btn btn-nav-icon-text">Reload</button>
                    </li>
                    <li>
                        <button id="nmos_election_button" onclick="onNmosElectionReset()" class="btn btn-nav-icon-text" style="display: none">Reset election</button> <!-- Hidden by default. Can be useful for troubleshooting. -->
                    </li>
                </ul>
                <form class="d-flex">
                    <input class="form-control rounded-0" type="search" aria-label="Filter" id="filterField" placeholder="Filter..." oninput="onFilterFieldChanged()">
                    <span><i class="icon-filter"></i></span>
                </form>
            </div>
        </nav>
        <div class="grid-wrapper" style="height: calc(100% - 36px);">
            <div id="nmos_table" style="height: 100%" class="ag-theme-balham-dark"></div>
        </div>
    </div>
    <div id="horizontalHandle" class="horizontal-split-handle" style="display: none;height: 10px;">
    </div>
    <div id="bottomPane" class="vertical-split-pane" style="display: none; background-color: var(--panel-bg);">
        <div class="modal-header">
            <span class="modal-title">
                <i class="icon-edit icon-white"></i>
                <label id="settings_title">XXXXX</label> <!-- Unit name will be set dynamically here. -->

                <span id="settings_status" style="display: none">
                    <label class="settings-status-style" id="settings_status_text"></label>
                </span>
            </span>
        </div>

        <!-- Main data section. -->
        <div class="row container-data" style="height: calc(100% - 110px);overflow:auto;">
            <div class="modal-body" id="settings_data_parent">
                <div class="details-column">
                    <table class="full-width">
                        <tr>
                            <td class="details-td-label" colspan="2">
                                <label id="interfaces_group_label" class="details-tr-group-label">Base configuration</label>
                            </td>
                        </tr>
                        <tr class="details-tr-field">
                            <td class="details-td-label">
                                <label id="nmos_interfaces_label" for="nmos_interfaces_div">Control access interfaces</label>
                            </td>
                            <td class="details-td-input">
                                <div id="nmos_interfaces_div" class="row-data">
                                    <!-- NMOS control interfaces: Checkboxes will be added dynamically. -->
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td class="details-td-label">
                                <label id="frame_host_name_label" for="frame_hostname">Frame interface Hostname</label>
                            </td>
                            <td class="details-td-input">
                                <input type="text" id="frame_hostname" class="form-control rounded-0 file-name-size" data-group="top" data-field/>
                            </td>
                        </tr>
                        <tr>
                            <td class="details-td-label">
                                <label id="host_name_label" for="media_hostname">Media interface Hostname</label>
                            </td>
                            <td class="details-td-input">
                                <input type="text" id="media_hostname" class="form-control rounded-0 file-name-size" data-group="top" data-field/>
                            </td>
                        </tr>
                        <tr>
                            <td class="details-td-label">
                                <label id="election_priority_label" for="election_priority">Slot local election priority</label>
                            </td>
                            <td class="details-td-input">
                                <!-- Notes: Priority value has no maximum on the server side. Specify data-group attribute so that it will be enabled/disabled accordingly. -->
                                <div class="select-wrapper">
                                    <select class="custom-select" name="election_priority_field" id="election_priority" data-field data-group="top" data-type="int">
                                        <option value="0">Low</option>
                                        <option value="1">Medium</option>
                                        <option value="2">High</option>
                                    </select>
                                </div>
                            </td>
                        </tr>

                        <tr>
                            <td class="details-td-label">
                                <label id="grouping_tags_label" for="grouping_tags">Add BCP002: <br> Natural Grouping Tags</label>
                            </td>
                            <td class="details-td-input">
                                <input type="checkbox" id="grouping_tags" data-field="grouping_tags"/>
                            </td>
                        </tr>

                        <tr><td>&nbsp;</td></tr>

                        <tr>
                            <td class="details-td-label" colspan="2">
                                <label id="nmos_ports_label" class="details-tr-group-label">Service Ports</label>
                            </td>
                        </tr>
                        <tr>
                            <td class="details-td-label">
                                <label id="is04_label" for="is04">IS-04</label>
                            </td>
                            <td class="details-td-input">
                                <input type="number" id="is04" class="form-control rounded-0 port-size" data-field data-type="int"/>
                            </td>
                        </tr>
                        <tr>
                            <td class="details-td-label">
                                <label id="is05_label" for="is05">IS-05</label>
                            </td>
                            <td class="details-td-input">
                                <input type="number" id="is05" class="form-control rounded-0 port-size" data-field data-type="int"/>
                            </td>
                        </tr>
                        <tr>
                            <td class="details-td-label">
                                <label id="is08_label" for="is08">IS-08</label>
                            </td>
                            <td class="details-td-input">
                                <input type="number" id="is08" class="form-control rounded-0 port-size" data-field data-type="int"/>
                            </td>
                        </tr>
                        <tr>
                            <td class="details-td-label">
                                <label id="is10_label" for="is10">IS-10</label>
                            </td>
                            <td class="details-td-input">
                                <input type="number" id="is10" class="form-control rounded-0 port-size" data-field data-type="int"/>
                            </td>
                        </tr>
                        <tr><td>&nbsp;</td></tr>

                        <tr>
                            <td class="details-td-label">
                                <label id="rds_enabler_label" for="rds_enabler" class="details-tr-group-label">Static RDS</label>
                            </td>
                            <td class="details-td-input">
                                <input type="checkbox" id="rds_enabler" onclick="decorateFields(this.id)" data-group="top" data-group-role="enabler"/>
                            </td>
                        </tr>
                        <tr>
                            <td class="details-td-label">
                                <label id="rds_addr_label" for="rds_addr">Address</label>
                            </td>
                            <td class="details-td-input">
                                <input type="text" id="rds_addr" class="form-control rounded-0 ip-address-size" data-group="rds_enabler" data-field/>
                            </td>
                        </tr>
                        <tr>
                            <td class="details-td-label">
                                <label id="rds_port_label" for="rds_port">Port</label>
                            </td>
                            <td class="details-td-input">
                                <input type="number" id="rds_port" class="form-control rounded-0 port-size" data-group="rds_enabler" data-field data-type="int"/>
                            </td>
                        </tr>
                        <tr>
                            <td class="details-td-label">
                                <label id="rds_ver_label" for="rds_ver">Version</label>
                            </td>
                            <td class="details-td-input">
                                <div class="select-wrapper">
                                    <select class="custom-select" name="rds_ver_field" id="rds_ver" data-group="rds_enabler" data-field>
                                        <!-- Populated dynamically when settings pane is shown. See populateFields() -->
                                    </select>
                                </div>
                            </td>
                        </tr>

                        <tr><td>&nbsp;</td></tr>

                        <tr>
                            <td class="details-td-label" colspan="2">
                                <label id="rds_info_label" class="details-tr-group-label">Runtime Information</label>
                            </td>
                        </tr>
                        <tr>
                            <td class="details-td-label">
                                <label id="rds_connections_label" for="rds_connections">RDS connections</label>
                            </td>
                            <td class="details-td-input">
                                <div id="rds_connections" data-field>
                                    <!-- Populated dynamically when settings pane is shown. See populateFields() -->
                                </div>
                            </td>
                        </tr>

                        <tr><td>&nbsp;</td></tr>

                        <tr>
                            <td class="details-td-label" colspan="2">
                                <label id="log_options_label" class="details-tr-group-label">Logging</label>
                            </td>
                        </tr>
                        <tr>
                            <td class="details-td-label">
                                <label id="log_level_label" for="log_level">Level</label>
                            </td>
                            <td class="details-td-input">
                                <div class="select-wrapper">
                                    <select class="custom-select" name="log_level_field" id="log_level" data-field="logging_level" data-type="int">
                                        <option value="40">Low</option>
                                        <option value="0">Normal</option>
                                        <option value="-40">High</option>
                                    </select>
                                </div>
                            </td>
                        </tr>

                    </table>
                </div>
                <div class="details-column">
                    <table>
                        <tr>
                            <td class="details-td-label">
                                <label id="auth_enabler_label" for="auth_enabler" class="details-tr-group-label">Enable Authorization (IS-10)</label>
                            </td>
                            <td class="details-td-input">
                                <input type="checkbox" id="auth_enabler" onclick="decorateFields(this.id)" data-field="authorized_mode" data-group="top" data-group-role="enabler"/>
                            </td>
                        </tr>
                        <tr>
                            <td class="details-td-label">
                                <label id="authorization_flow_label" for="authorization_flow">Authorization Flow</label>
                            </td>
                            <td class="details-td-input">
                                <div class="select-wrapper">
                                    <select class="custom-select" name="authorization_flow_field" id="authorization_flow" data-group="auth_enabler" data-field>
                                        <!-- Populated dynamically when settings pane is shown. See populateFields -->
                                    </select>
                                </div>
                            </td>
                        </tr>
                        <tr><td>&nbsp;</td></tr>

                        <tr>
                            <td class="details-td-label">
                                <label id="auth_server_enabler_label" for="auth_server_enabler" class="details-tr-group-label">Static Authorization Server</label>
                            </td>
                            <td class="details-td-input">
                                <input type="checkbox" id="auth_server_enabler" onclick="decorateFields(this.id)" data-group="auth_enabler" data-group-role="enabler"/>
                            </td>
                        </tr>
                        <tr>
                            <td class="details-td-label">
                                <label id="auth_server_address_label" for="auth_server_address">Address</label>
                            </td>
                            <td class="details-td-input">
                                <input type="text" id="auth_server_address" class="form-control rounded-0 ip-address-size" data-group="auth_server_enabler" data-field="authorization_address"/>
                            </td>
                        </tr>
                        <tr>
                            <td class="details-td-label">
                                <label id="auth_server_port_label" for="auth_server_port">Port</label>
                            </td>
                            <td class="details-td-input">
                                <input type="number" id="auth_server_port" class="form-control rounded-0 port-size" min="0" max="65536" value="443" data-group="auth_server_enabler" data-field="authorization_port" data-type="int"/>
                            </td>
                        </tr>
                        <tr>
                            <td class="details-td-label">
                                <label id="auth_server_version_label" for="auth_server_version">Version</label>
                            </td>
                            <td class="details-td-input">
                                <input type="text" id="auth_server_version" class="form-control rounded-0 version-size" data-group="auth_server_enabler" data-field="authorization_version"/>
                            </td>
                        </tr>
                        <tr>
                            <td class="details-td-label">
                                <label id="auth_server_selector_label" for="auth_server_selector">Selector</label>
                            </td>
                            <td class="details-td-input">
                                <input type="text" id="auth_server_selector" class="form-control rounded-0 version-size" data-group="auth_server_enabler" data-field="authorization_selector"/>
                            </td>
                        </tr>
                        <tr><td>&nbsp;</td></tr>

                        <tr>
                            <td class="details-td-label">
                                <label id="sec_options_enabler_label" for="sec_options_enabler" class="details-tr-group-label">Security Options</label>
                            </td>
                            <td class="details-td-input">
                                <input type="checkbox" id="sec_options_enabler" onclick="decorateFields(this.id)" data-group="auth_enabler" data-group-role="enabler"/>
                            </td>
                        </tr>
                        <tr>
                            <td class="details-td-label">
                                <label id="server_secure_label" for="server_secure">Server uses secure connection</label>
                            </td>
                            <td class="details-td-input">
                                <input type="checkbox" id="server_secure" data-group="sec_options_enabler" data-field/>
                            </td>
                        </tr>
                        <tr>
                            <td class="details-td-label">
                                <label id="client_secure_label" for="client_secure">Client uses secure connection</label>
                            </td>
                            <td class="details-td-input">
                                <input type="checkbox" id="client_secure" data-group="sec_options_enabler" data-field/>
                            </td>
                        </tr>
                        <tr>
                            <td class="details-td-label">
                                <label id="validate_certificates_label" for="validate_certificates">Validate certificates</label>
                            </td>
                            <td class="details-td-input">
                                <input type="checkbox" id="validate_certificates" data-group="sec_options_enabler" data-field/>
                            </td>
                        </tr>
                        <tr>
                            <td class="details-td-label">
                                <label id="server_certificates_label" for="server_certs_button">Server certificates</label>
                            </td>
                            <td class="details-td-input">
                                <button class="btn btn-text" id="server_certs_button" onclick="showServerCertsDialog()" data-group="sec_options_enabler">Set...</button>
                            </td>
                        </tr>
                        <tr class="details-tr-field">
                            <td class="details-td-label">
                                <label id="ca_file_label" for="ca_file_select">Certification authorities file</label>
                            </td>
                            <td class="details-td-input">
                                <div class="select-wrapper">
                                    <select class="custom-select" name="ca_file_select_field" id="ca_file_select" data-group="sec_options_enabler" data-field="ca_certificate_file">
                                        <!-- Populated dynamically when settings pane is shown. See populateFields -->
                                    </select>
                                </div>
                            </td>
                        </tr>
                        <tr class="details-tr-field">
                            <td class="details-td-label">
                                <label id="dh_file_label" for="dh_file_select">Diffie-Hellman parameters file</label>
                            </td>
                            <td class="details-td-input">
                                <div class="select-wrapper">
                                    <select class="custom-select" name="dh_file_select_field" id="dh_file_select" data-group="sec_options_enabler" data-field="dh_param_file">
                                        <!-- Populated dynamically when settings pane is shown. See populateFields -->
                                    </select>
                                </div>
                            </td>
                        </tr>

                        <tr><td>&nbsp;</td></tr>

                        <tr>
                            <td class="details-td-label" colspan="2">
                                <label id="files_label" class="details-tr-group-label">Files</label>
                            </td>
                        </tr>
                        <tr>
                            <td class="details-td-label">
                                <label id="sec_files_label">Security files</label>
                            </td>
                            <td class="details-td-input">
                                <button class="btn btn-text" onclick="showCertFileDialog()">Manage...</button>
                            </td>
                        </tr>

                    </table>
                </div>
                <div class="details-column">
                    <table>
                        <tr>
                            <td class="details-td-label acmefields">
                                <label id="acme_enable_label" for="acme_group" class="details-tr-group-label">Enable ACME</label>
                            </td>
                            <td class="details-td-input acmefields">
                                <input type="checkbox" id="acme_group" onclick="decorateFields(this.id)" data-field="acme.cfg.enable" data-group="top" data-group-role="enabler"/>
                            </td>
                        </tr>
                        <tr>
                            <td class="details-td-label acmefields">
                                <label id="acme_server_url_label" for="acme_server_url">Server URL:</label>
                            </td>
                            <td class="details-td-input acmefields">
                                <input type="text" id="acme_server_url" class="form-control rounded-0 file-name-size" data-group="acme_group" data-field="acme.cfg.server_url"/>
                            </td>
                        </tr>
                        <tr>
                            <td class="details-td-label acmefields">
                                <label id="acme_received_label" for="acme_certificates_received" class="details-tr-group-label">Certificates Received</label>
                            </td>
                            <td class="details-td-input acmefields">
                                <input type="checkbox" id="acme_certificates_received" data-field="acme.certsReceived" data-group="acme_status" value="0" disabled />
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>

        <div class="modal-footer panel-footer">
            <button id="details_apply_button" class="btn btn-text" onclick="onApplyNmosUnit()">Apply</button>
        </div>

    </div>
</div>

<div class="modal" id="errorsModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="errorModalLabel"aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-errors-size">
        <div class="modal-content">
            <div class="modal-header error-header justify-content-between">
                <span class="modal-title" id="errorModalLabel"><i class="icon-alarm-error-header"></i>Errors</span>
                <span class="btn btn-transparent" onclick="hideDialog('errorsModal');"><i class="icon-close-header"></i></span>
            </div>
            <div class="modal-body">
                <p class="container-data" id="errorListHeading">There are the following errors: </p>
                <div class="container-data" id="errorList"></div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-text" onclick="hideDialog('errorsModal');">Close</button>
            </div>
        </div>
    </div>
</div>

<div class="modal" id="cert_file_dialog" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="cert_file_dialog_label" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-cert-size">
        <div class="modal-content">
            <div class="modal-header justify-content-between">
                <span class="modal-title" id="dlg_cert_title"><i class="icon-import icon-white"></i>NMOS Security Files</span>
                <span class="btn btn-transparent" onclick="hideDialog('cert_file_dialog');"><i class="icon-close-header"></i></span>
            </div>
            <div class="modal-body">
                <div class="container-data">
                    <div class="container-details">
                        <label id="dlg_cert_unit"></label> <!-- To be set to unit name when dialog is shown. -->
                    </div>
                    <table class="full-width">
                        <tr class="row-data">
                            <td class="col-data-label">
                                <label id="dlg_cert_category_label" for="dlg_cert_category">Category</label>
                            </td>
                            <td class="col-data-input">
                                <div class="select-wrapper">
                                    <select class="custom-select" name="dlg_cert_category_field" id="dlg_cert_category" onchange="onChangeFileCategory(this)">
                                        <!-- Populated dynamically when settings pane is shown. See showCertFileDialog(category) -->
                                    </select>
                                </div>
                            </td>
                        </tr>
                        <tr class="row-data">
                            <td class="col-data-label">
                                <label id="dlg_cert_file_label" for="dlg_cert_file">File</label>
                            </td>
                            <td class="details-td-input">
                                <input type="file" name="dlg_cert_file_field" id="dlg_cert_file" required/>
                            </td>
                        </tr>
                        <tr class="row-data">
                            <td class="col-data-label" colspan="2">
                                <button class="btn btn-text btn-right" id="dlg_cert_add" onclick="doCertFileAdd()">Add</button>
                            </td>
                        </tr>
                    </table>
                    <hr>
                    <div class="grid-wrapper-cert-file-table">
                        <div id="cert_file_table" style="height: 100%;" class="ag-theme-balham-dark"></div>
                    </div>
                    <table class="full-width">
                        <tr>
                            <td>
                                <button class="btn btn-text btn-right" id="dlg_cert_delete" onclick="doCertFileDelete()">Delete</button>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-text" id="dlg_cert_close" onclick="hideDialog('cert_file_dialog');">Close</button>
            </div>
        </div>
    </div>
</div>


<div class="modal" id="server_certs_dialog" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="server_certs_dialog_label" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-server-certs-size">
        <div class="modal-content">
            <div class="modal-header justify-content-between">
                <span class="modal-title" id="dlg_server_certs_title"><i class="icon-certificates icon-white"></i>Server Certificates</span>
                <span class="btn btn-transparent" onclick="hideDialog('server_certs_dialog');"><i class="icon-close-header"></i></span>
            </div>
            <div class="modal-body">
                <div class="container-data">
                    <div class ="container-details">
                        <label id="dlg_server_certs_unit"></label> <!-- To be set to unit name when dialog is shown. -->
                    </div>
                    <table class="full-width">
                        <tr class="row-data">
                            <td class="col-data-label">
                                <label id="dlg_server_certs_key_algorithm_label" for="dlg_server_certs_key_algorithm">Key algorithm</label>
                            </td>
                            <td class="col-data-input">
                                <div class="select-wrapper">
                                    <select class="custom-select" name="dlg_server_certs_key_algorithm_field" id="dlg_server_certs_key_algorithm">
                                        <!-- Populated dynamically in showServerCertsDialog. -->
                                    </select>
                                </div>
                            </td>
                        </tr>
                        <tr class="row-data">
                            <td class="col-data-label">
                                <label id="dlg_server_certs_key_file_label" for="dlg_server_certs_key_file">Private key file</label>
                            </td>
                            <td class="col-data-input">
                                <div class="select-wrapper">
                                    <select class="custom-select" name="dlg_server_certs_key_file_field" id="dlg_server_certs_key_file">
                                        <!-- Populated dynamically in showServerCertsDialog. -->
                                    </select>
                                </div>
                            </td>
                        </tr>
                        <tr class="row-data">
                            <td class="col-data-label">
                                <label id="dlg_server_certs_chain_file_label" for="dlg_server_certs_chain_file">Certificate chain file</label>
                            </td>
                            <td class="col-data-input">
                                <div class="select-wrapper">
                                    <select name="dlg_server_certs_chain_file_field" id="dlg_server_certs_chain_file" class="form-control rounded-0">
                                        <!-- Populated dynamically in showServerCertsDialog. -->
                                    </select>
                                </div>
                            </td>
                        </tr>
                        <tr class="row-data">
                            <td class="col-data-label" colspan="2">
                                <button class="btn btn-text" style="float: right" id="dlg_server_certs_add" onclick="doServerCertsAdd()">Add</button>
                            </td>
                        </tr>
                    </table>
                    <hr>
                    <div class="grid-wrapper-server_certs_table">
                        <div id="server_certs_table" style="height: 100%;" class="ag-theme-balham-dark"></div>
                    </div>
                    <table class="full-width">
                        <tr>
                            <td>
                                <button class="btn btn-text btn-right" id="dlg_server_certs_delete" onclick="doServerCertsDelete()">Delete</button>
                            </td>
                        </tr>
                    </table>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-text" id="server_certs_button_close" onclick="hideDialog('server_certs_dialog');">Close</button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Scripts in rcs/go/web/public/js/... -->
<script src="/static/js/js-utils.js"></script>
<script src="/static/js/aggrid-utils.js"></script>

<!-- Application code. -->
<script src="/static/js/frame-ipx/ip-nmos.js"></script>

{{ end }}