<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NTSH Control</title>

    <link rel="stylesheet" href="/material-symbols/index.css">
    <link rel="stylesheet" href="/dashboard/style.css">
    <script defer src="/dashboard/script.js" defer></script>

    <link rel="icon" type="image/png" sizes="32x32" href="/img/cloud_thick.png">
</head>

<body>
    <div class="sn">
        <div class="ntsh_menubar">

        </div>

        <div class="ntsh_tabs">
            <div class="ntsh_tab" tabid="dashboard">
                <div class="ntsh_dashboard">

                    <div class="ntsh_dashboard-box ntsh_dashboard-camerarunner">
                        <div class="ntsh_dashboard-box-header mux_header">Camera Runner</div>

                        <table class="ntsh_vertical">
                            <tr>
                                <td>
                                    <div class="mux_text">Connection</div>
                                </td>
                                <td>
                                    <div class="ntsh_status ntsh_dashboard-camerarunner-connectionstatus"></div>
                                </td>
                                <td>
                                    <div class="ntsh_dashboard-camerarunner-connectioninfo mux_text">
                                    </div>
                                </td>
                                <td>
                                    <div class="ntsh_buttons">
                                        <div class="ntsh_button mux_text ntsh_dashboard-camerarunner-reboot">
                                            Reboot
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="mux_text">Process</div>
                                </td>
                                <td>
                                    <div class="ntsh_status ntsh_dashboard-camerarunner-processstatus"></div>
                                </td>
                                <td>
                                    <div class="ntsh_dashboard-camerarunner-processinfo mux_text">
                                    </div>
                                </td>
                                <td>
                                    <div class="ntsh_buttons">
                                        <div class="ntsh_button mux_text ntsh_dashboard-camerarunner-restart">
                                            Restart Process
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="mux_text">Uptime</div>
                                </td>
                                <td>
                                </td>
                                <td>
                                    <div class="ntsh_dashboard-camerarunner-uptime mux_text">
                                    </div>
                                </td>
                                <td>
                                </td>
                            </tr>
                        </table>

                        <div class="ntsh_dashboard-error ntsh_dashboard-camerarunner-error">
                            <div class="mux_header">Error</div>
                            <div class="mux_text ntsh_dashboard-camerarunner-errortext">
                            </div>
                        </div>
                    </div>

                    <div class="ntsh_dashboard-box ntsh_dashboard-unity">
                        <div class="ntsh_dashboard-box-header mux_header">Unity</div>

                        <table class="ntsh_vertical">
                            <tr>
                                <td>
                                    <div class="mux_text">Process</div>
                                </td>
                                <td>
                                    <div class="ntsh_status ntsh_dashboard-unity-processstatus"></div>
                                </td>
                                <td>
                                    <div class="ntsh_dashboard-unity-processinfo mux_text">
                                    </div>
                                </td>
                                <td>
                                    <div class="ntsh_buttons">
                                        <div class="ntsh_button mux_text ntsh_dashboard-unity-restart">
                                            Restart
                                        </div>
                                        <div class="ntsh_button mux_text ntsh_dashboard-unity-stop">
                                            Stop
                                        </div>
                                        <div class="ntsh_button mux_text ntsh_dashboard-unity-start">
                                            Start
                                        </div>

                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="mux_text">Uptime</div>
                                </td>
                                <td>
                                </td>
                                <td>
                                    <div class="ntsh_dashboard-unity-uptime mux_text">
                                    </div>
                                </td>
                                <td>
                                </td>
                            </tr>

                            <tr>
                                <td>
                                    <div class="mux_text">WebSocket</div>
                                </td>
                                <td>
                                    <div class="ntsh_status ntsh_dashboard-unity-websocketstatus"></div>
                                </td>
                                <td>
                                    <div class="ntsh_dashboard-unity-websocketinfo mux_text">
                                    </div>
                                </td>
                                <td>
                                </td>
                            </tr>

                            <tr>
                                <td>
                                    <div class="mux_text">Service</div>
                                </td>
                                <td>
                                    <div class="ntsh_status ntsh_dashboard-unity-outofservicestatus"></div>
                                </td>
                                <td>
                                    <div class="ntsh_dashboard-unity-outofserviceinfo mux_text">
                                    </div>
                                </td>
                                <td>
                                    <div class="ntsh_buttons">
                                        <div class="ntsh_button mux_text ntsh_dashboard-unity-enableoutofservice">
                                            Set Out of Service
                                        </div>
                                        <div class="ntsh_button mux_text ntsh_dashboard-unity-disableoutofservice">
                                            Set Operational
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        </table>

                        <div class="ntsh_dashboard-error ntsh_dashboard-unity-error">
                            <div class="mux_header">Error</div>
                            <div class="mux_text ntsh_dashboard-unity-errortext">
                            </div>
                        </div>
                    </div>

                    <div class="ntsh_dashboard-box ntsh_dashboard-unityzedstream">
                        <div class="ntsh_dashboard-box-header mux_header">ZED Stream</div>
                        <table class="ntsh_vertical">
                            <tr>
                                <td>
                                    <div class="mux_text">Connection</div>
                                </td>
                                <td>
                                    <div class="ntsh_status ntsh_dashboard-unity-zedstreamstatus"></div>
                                </td>
                                <td>
                                    <div class="ntsh_dashboard-unity-zedstreaminfo mux_text">
                                    </div>
                                </td>
                                <td>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="mux_text">FPS</div>
                                </td>
                                <td>

                                </td>
                                <td>
                                    <div class="ntsh_dashboard-unity-zedstreamfps mux_text">
                                    </div>
                                </td>
                                <td>
                                </td>
                            </tr>
                        </table>
                    </div>


                    <div class="ntsh_dashboard-box ntsh_dashboard-unitytimeline">
                        <div class="ntsh_dashboard-box-header mux_header">Timeline</div>

                        <table class="ntsh_horizontal">
                            <tr>
                                <td>
                                    <div class="mux_text">Watching</div>
                                </td>
                                <td>
                                    <div class="mux_text">Standing</div>
                                </td>
                                <td>
                                    <div class="mux_text">Progress</div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="mux_text mux_big ntsh_dashboard-unity-timeline-watching">
                                    </div>
                                </td>
                                <td>
                                    <div class="mux_text mux_big ntsh_dashboard-unity-timeline-standing">
                                    </div>
                                </td>
                                <td>
                                    <div class="mux_text mux_big ntsh_progress ntsh_dashboard-unity-timeline-progress">
                                        <div class="ntsh_progress-value ntsh_progress-smooth"></div>
                                        <div class="ntsh_progress-label"></div>
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </div>


                    <div class="ntsh_dashboard-box ntsh_dashboard-unityparameters">
                        <div class="ntsh_dashboard-box-header mux_header">Audio</div>

                        <table class="ntsh_vertical ntsh_dashboard-unity-parameters">
                            <tr>
                                <td>
                                    <div class="mux_text ntsh_dashboard-unity-parameters-loading">Waiting for Unity...
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div class="ntsh_dashboard-box ntsh_dashboard-unityadvancedparameters">
                        <div class="ntsh_dashboard-box-header mux_header">Parameters</div>

                        <table class="ntsh_vertical ntsh_dashboard-unity-advancedparameters">
                            <tr>
                                <td>
                                    <div class="mux_text ntsh_dashboard-unity-advancedparameters-loading">Waiting for
                                        Unity...
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div class="ntsh_dashboard-box ntsh_dashboard-unitysensors">
                        <div class="ntsh_dashboard-box-header mux_header">Sensors</div>

                        <table class="ntsh_vertical ntsh_dashboard-unity-sensors">
                            <tr>
                                <td>
                                    <div class="mux_text ntsh_dashboard-unity-sensors-loading">Waiting for Unity...
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>

            <div class="ntsh_tab" tabid="calibration">
                <div class="ntsh_calibration">
                    <div class="ntsh_calibration-fullscreen">
                        <span class="material-symbols-outlined">
                            fullscreen
                        </span>
                    </div>

                    <img src="/calibrationImage">
                </div>

            </div>

            <div class="ntsh_tab" tabid="cameralogs">
                <div class="ntsh_logs mux_text">
                    <div class="ntsh_log ntsh_log-fill">
                        No logs yet...
                    </div>
                </div>
            </div>

            <div class="ntsh_tab" tabid="unitylogs">
                <div class="ntsh_logs mux_text">
                    <div class="ntsh_log ntsh_log-fill">
                        No logs yet...
                    </div>
                </div>
            </div>
        </div>

        <div class="ntsh_shutdown">
            <span class="material-symbols-outlined">
                power_settings_new
            </span>
            <div class="mux_header">
                Installation has been shut down
            </div>
            <div class="mux_text">
                You can now safely turn off the power to the device.
            </div>
        </div>
    </div>
</body>

</html>