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

<nav class="navbar navbar-expand-md">
    <div class="collapse navbar-collapse" id="navbarToggler">
        <ul class="navbar-nav me-auto mb-lg-0">
            <li>
                <input type="checkbox" class="btn-check" name="autoUpdate" id="autoUpdate" onclick="onAutoUpdateChanged();" checked>
                <label class="btn" for="autoUpdate">Auto-Update</label>
            </li>
        </ul>
    </div>
</nav>

<div class="grid-wrapper grid-wrapper-session-counters">

    <div class="flex-shrink-0 units-list">
        <a class="d-flex align-items-center mb-3 link-body-emphasis text-decoration-none border-bottom">
            <span class="fs-5 fw-semibold">Units</span>
        </a>
        <ul class="list-unstyled ps-0" id="sideBarContents">
            <li>
                <div class="loading" style="position: relative;">&nbsp;</div>
            </li>
        </ul>
    </div>

    <div class="container-data-zone" id="dataZone">
        <div  class="container-counters" id="socCounters">
            <table class="container-data table-data-counters">
                <tr class="row-data">
                    <td class="col-data-label">Slot</td>
                    <td class="col-data-input">
                        <input id="socSlot" class="form-control rounded-0 four-char-size" type="number" min="0" max="64" value="0" readonly/>
                    </td>
                    <td class="col-data-label">&nbsp;</td>

                    <td class="col-data-label">SOC</td>
                    <td class="col-data-input">
                        <input id="socSoc" class="form-control rounded-0 four-char-size" type="number" min="0" max="127" value="127" readonly/>
                    </td>
                </tr>

                <tr class="row-data">
                    <td class="col-data-label">Ethernet Link Changes</td>
                    <td class="col-data-input">
                        <input id="socEthernetLinkChanges" class="form-control rounded-0 four-char-size" type="number" min="0" max="64" value="0" readonly/>
                    </td>
                </tr>
            </table>

            <div id="socCharts">
            </div>

        </div>
        <div class="container-counters" id="sessionCounters">
            <table class="container-data table-data-counters">
                <tr class="row-data">
                    <td class="col-data-label">Session Id</td>
                    <td class="col-data-input">
                        <input id="sessiondId" class="form-control rounded-0 four-char-size" type="number" value="127" readonly/>
                    </td>

                    <td class="col-data-label">&nbsp;</td>

                    <td class="col-data-label">Session Name</td>
                    <td class="col-data-input">
                        <input id="sessionName" class="form-control rounded-0 four-char-size" type="text" value="127"readonly/>
                    </td>
                </tr>

                <tr class="row-data">
                    <td class="col-data-label">Direction</td>
                    <td class="col-data-input">
                        <input id="sessionDirection" class="form-control rounded-0 four-char-size" type="text" value="127" readonly/>
                    </td>

                    <td class="col-data-label">&nbsp;</td>

                    <td class="col-data-label">Session Type</td>
                    <td class="col-data-input">
                        <input id="sessionType" class="form-control rounded-0 four-char-size" type="text" value="127" readonly/>
                    </td>
                </tr>
                <tr class="row-data">
                    <td class="col-data-label">RTP Packets</td>
                    <td class="col-data-input">
                        <input id="sessionPackets" class="form-control rounded-0 four-char-size" type="number" value="127" readonly/>
                    </td>
                </tr>
            </table>

            <div id="sessionCharts">
            </div>

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


<!--Third-party libraries-->
<script src="/static/js/ag-charts-community.js"></script>

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

<script type="application/javascript">
const is5RUFrame = "{{ .model }}" == "ULTRIX_5RU";
const flexString = "flex";
const model = "{{ .model }}";
</script>

{{ end }}