{% extends 'base.html' %}

{% block content %}
<div class="row">
    <div class="col-md-6">
        <div class="card mb-4">
            <div class="card-header"><h6><i class="bi bi-cpu"></i> {{ _("CPU") }}</h6></div>
            <div class="card-body text-center">

<div id="cpuGauge"></div>
<p>{{ _('Current CPU usage:') }} {{ container_stats['CPU %'] }}</br>&nbsp;</p>

<a id="topCpuButton" class="btn btn-primary btn-sm mb-3" data-bs-toggle="collapse" href="#show_top_cpu_processes" role="button" aria-expanded="false" aria-controls="show_top_cpu_processes">{{ _('View top processes') }} </a> <a href="/usage/history" class="btn btn-dark btn-sm mb-3" type="button">{{ _("View past usage") }}</a>
<div class="collapse" id="show_top_cpu_processes">
<div id="cpu_current"></div>
</div>




    </div></div></div>
    <div class="col-md-6">
        <div class="card mb-4">
            <div class="card-header"><h6><i class="bi bi-memory"></i> {{ _("RAM") }}</h6></div>
            <div class="card-body text-center">
                <div id="ramGauge"></div>
                <p>{{ _('Current Memory usage:') }}  {{ container_stats['Memory %'] }}<br>({{ container_stats['Memory Usage'] }} / {{ container_stats['Memory Limit'] }})</p>

<a id="topMemButton" class="btn btn-primary btn-sm mb-3" data-bs-toggle="collapse" href="#show_top_mem_processes" role="button" aria-expanded="false" aria-controls="show_top_mem_processes">{{ _('View top processes') }} </a> <a href="/usage/history" class="btn btn-dark btn-sm mb-3" type="button">{{ _("View past usage") }}</a>
<div class="collapse" id="show_top_mem_processes">
<div id="ram_current"></div>
</div>


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



<script>
    // Function to send AJAX request
    function sendAjaxRequest(sortParameter, targetDiv) {
        // Create a new XMLHttpRequest object
        var xhr = new XMLHttpRequest();

        // Specify the request method and URL
        var url = "/usage/current?sort_parameter=" + sortParameter;
        xhr.open("GET", url, true);

        // Set up the callback function to handle the response
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                // Parse the JSON response
                var response = JSON.parse(xhr.responseText);

                // Update the content of the target div with a formatted table
                document.getElementById(targetDiv).innerHTML = formatTable(response.result, sortParameter);
            }
        };

        // Send the request
        xhr.send();
    }

    // Function to format data as a Bootstrap table
    function formatTable(data, sortParameter) {
        var columns;
        if (sortParameter === "cpu") {
            columns = ["PID", "%CPU", "TIME", "COMMAND"];
        } else if (sortParameter === "mem") {
            columns = ["PID", "%MEM", "TIME", "COMMAND"];
        } else {
            // Default columns
            columns = ["PID", "Column3", "Column4", "Column5"];
        }

        var table = "<table class='table table-bordered table-hover'>" +
                    "<thead><tr>";
        
        // Add the specified columns to the table header
        for (var i = 0; i < columns.length; i++) {
            table += "<th>" + columns[i] + "</th>";
        }

        table += "</tr></thead>" +
                 "<tbody>";

        // Iterate through each row and create table rows
        for (var i = 0; i < data.length; i++) {
            table += "<tr>";

            // Add the specified columns to the table rows
            for (var j = 0; j < columns.length; j++) {
                table += "<td>" + data[i][columns[j]] + "</td>";
            }

            table += "</tr>";
        }

        table += "</tbody></table>";
        return table;
    }

    // Attach click event listeners to the buttons
    document.getElementById("topCpuButton").addEventListener("click", function () {
        sendAjaxRequest("cpu", "cpu_current");
    });

    document.getElementById("topMemButton").addEventListener("click", function () {
        sendAjaxRequest("mem", "ram_current");
    });

</script>





</div>



<script>
// needs to be function
function createGauge(elementId, value, title) {
    return new JustGage({
        id: elementId,
        value: parseFloat(value),
        min: 0,
        max: 100,
        title: title
    });
}

function updateGauges() {
    const cpuPercentage = "{{ container_stats['CPU %'] }}";
    const ramPercentage = "{{ container_stats['Memory %'] }}";
    createGauge('cpuGauge', cpuPercentage, 'CPU Percentage');
    createGauge('ramGauge', ramPercentage, 'RAM Percentage');
}

updateGauges();
</script>



<div class="row">
    <div class="col-md-4">
        <div class="card mb-4">
            <div class="card-header"><h6><i class="bi bi-ethernet"></i> {{ _('Network I/O') }} </h6></div>
            <div class="card-body">{{ container_stats['Network I/O'] }}</div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card mb-4">
            <div class="card-header"><h6><i class="bi bi-device-ssd"></i> {{ _('Block I/O') }} </h6></div>
            <div class="card-body">{{ container_stats['Block I/O'] }}</div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card">
            <div class="card-header"><h6>{{ _("PIDs") }}</h6></div>
            <div class="card-body">{{ container_stats['PIDs'] }}</div>
        </div>
    </div>
</div>

<script>
document.addEventListener("keydown", function(event) {
    if (event.shiftKey) {
        if (event.key === "C") {
            window.location.href = "/usage";
        }
        if (event.key === "O") {
            window.location.href = "/usage/history";
        }
        else if (event.key === "L") {
            window.location.href = "/usage/logs";
        }
    }
});
</script>
{% endblock %}