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

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="description" content="HiveCV Web Service provides an insight to user data via browser">
    <meta name="keywords" content="hivecv,data">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HiveCV Web Service</title>
    <link rel="icon" href="/home/static/img/favicon.ico" type="image/x-icon" sizes="any"/>
    <link rel="stylesheet" href="/home/static/css/chartist.min.css">
    <link rel="stylesheet" href="/home/static/css/inter.css">
    <link rel="stylesheet" href="/home/static/fontawesome-6.7.2/css/all.min.css">
    <script src="/home/static/js/tailwind4.mjs"></script>
    <script src="/home/static/js/chartist.min.js"></script>

    <style type="text/tailwindcss">
      @theme {
        --font-sans: InterVariable, sans-serif;
      }
    </style>


    <style>
        .border-l-1 {
            border-left-width: 1px;
        }
    </style>

</head>

<body class="flex h-screen bg-gray-100 font-sans">

    <div class="flex flex-row flex-wrap flex-1 flex-grow content-start">

        <div id="dash-content" class="bg-gray-200 py-6 lg:py-0 w-full lg:max-w-sm flex flex-wrap content-start">
            <div class="w-1/2 lg:w-full">
                <div class="border-2 border-gray-400 border-dashed hover:border-transparent hover:bg-white hover:shadow-xl rounded p-6 m-2 md:mx-10 md:my-6">
                    <div class="flex flex-col items-center">
                        <div class="flex-shrink">
                            <div class="rounded-full p-3 bg-gray-300"><i class="fas fa-server fa-fw fa-inverse text-indigo-500"></i></div>
                        </div>
                        <div class="flex-1">
                            <h3 class="font-bold text-3xl">{{ device_uptime }}</h3>
                            <h5 class="font-bold text-gray-500">Device Uptime</h5>
                        </div>
                    </div>
                </div>
            </div>

            <div class="w-1/2 lg:w-full">
                <div class="border-2 border-gray-400 border-dashed hover:border-transparent hover:bg-white hover:shadow-xl rounded p-6 m-2 md:mx-10 md:my-6">
                    <div class="flex flex-col items-center">
                        <div class="flex-shrink">
                            <div class="rounded-full p-3 bg-gray-300"><i class="fa fa-eye fa-fw fa-inverse text-indigo-500"></i></div>
                        </div>
                        <div class="flex-1">
                            <h3 class="font-bold text-3xl">{{ app_uptime }}</h3>
                            <h5 class="font-bold text-gray-500">App uptime</h5>
                        </div>
                    </div>
                </div>
            </div>

            {% for module in modules %}
                <div class="w-1/2 lg:w-full" onclick="window.location.href='{{ module.base_url }}'">
                    <div class="border-2 border-gray-400 border-dashed hover:border-transparent hover:bg-white hover:shadow-xl rounded p-6 m-2 md:mx-10 md:my-6">
                        <div class="flex flex-col items-center">
                            <div class="flex-shrink">
                                <div class="rounded-full p-3 bg-gray-300">
                                    <i class="fa fa-layer-group fa-fw fa-inverse text-indigo-500"></i>
                                </div>
                            </div>
                            <div class="flex-1">
                                <h3 class="font-bold text-3xl">{{ module.module_name }}</h3>
                            </div>
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>

        <div id="main-content" class="w-full flex-1">

            <div class="flex flex-1 flex-wrap">
                <div class="w-full xl:w-2/3 p-6 xl:max-w-6xl">
                    <div class="text-center">
                        <h1 class="font-bold text-black mt-5 text-3xl">HiveCV Device Dashboard</h1>
                    </div>

                    <div class="max-w-full lg:max-w-3xl xl:max-w-5xl">

                        <div class="border-b p-3">
                            <h5 class="font-bold text-blue-500">Live Preview</h5>
                        </div>
                        <div class="p-5">
                            <img class="video" src="/home/video_feed" onerror='this.src = "/home/static/img/nostream.png"'/>
                        </div>

                        <div class="p-3">
                            <div class="border-b p-3">
                                <h5 class="font-bold text-blue-500">Device Information</h5>
                            </div>
                            <div class="p-5">
                                <table class="w-full p-5 mb-5 text-gray-700">
                                    <tbody>
                                        <tr>
                                            <td>OS Name</td>
                                            <td>{{ os_name }}</td>
                                        </tr>
                                        <tr>
                                            <td>OS Version</td>
                                            <td>{{ os_version }}</td>
                                        </tr>
                                        <tr>
                                            <td>Python version</td>
                                            <td>{{ python_version }}</td>
                                        </tr>
                                    </tbody>
                                </table>

                                <span class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
                                    <button>Export diagnostics data...</button>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="w-full xl:w-1/3 p-6 xl:max-w-4xl border-l-1 border-gray-300">
                    <div class="max-w-sm lg:max-w-3xl xl:max-w-5xl">
                        <div class="border-b p-3">
                            <h5 class="font-bold text-blue-500">CPU Usage</h5>
                        </div>
                        <div class="p-5">
                            <div class="ct-chart ct-golden-section" id="chart2"></div>
                        </div>

                        <div class="border-b p-3">
                            <h5 class="font-bold text-blue-500">RAM Usage</h5>
                        </div>
                        <div class="p-5">
                            <div class="ct-chart ct-golden-section" id="chart3"></div>
                        </div>

                        <div class="border-b p-3">
                            <h5 class="font-bold text-blue-500">Disk utilization</h5>
                        </div>
                        <div class="p-5">
                            <div class="ct-chart ct-golden-section" id="chart4"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        /* Refer to https://gionkunz.github.io/chartist-js/examples.html for setting up the graphs */

        new Chartist.Line('#chart2', {
            labels: ["{{ cpu|map(attribute=0)|join('", "')|safe }}"],
            series: [
                [{{ cpu|map(attribute=1)|join(', ')|safe }}]
            ]
        }, {
            low: 0,
            high: 100
        });

        new Chartist.Line('#chart3', {
            labels: ["{{ ram|map(attribute=0)|join('", "')|safe }}"],
            series: [
                [{{ ram|map(attribute=1)|join(', ')|safe }}]
            ]
        }, {
            low: 0,
            high: 100
        });

        new Chartist.Pie('#chart4', {
            series: [{{ disk * 100 }}, {{ (1 - disk) * 100 }}],
            labels: ["Used", "Free"]
        }, {
            donut: true,
            showLabel: true
        });

    </script>

</body>
</html>