{% extends 'base.html' %}
{% block body %}
<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>
{% endblock %}