{% include 'base.html' %}
{% block main %}

<div class="dashform">
        <div class="card">
                <div class="card-header">
                Hostname
                </div>
                <div class="card-body">
                        {{ hostname | safe }}
                </div>
        </div>
</div>
<div class="dashform">
        <div class="card">
                <div class="card-header">
                User
                </div>
                <div class="card-body">

                        {{ loguser | safe }}
                </div>
        </div>
</div>
<div class="dashform">
        <div class="card">
                <div class="card-header">
                Containers
                </div>
                <div class="card-body">

                        <span style="color:green;">{{ activ_ct | safe }} up</span>
                        <span style="color:red;">{{ inactiv_ct | safe }} down</span>
                </div>
        </div>
</div>
<div class="dashform">
        <div class="card">
                <div class="card-header">
                        Virtual Servers
                </div>
                <div class="card-body">

                        <span style="color:green;">{{ activ_vm | safe}} up</span>
                        <span style="color:red;">{{ inactiv_vm | safe}} down</span>
                </div>
        </div>
</div>

<!-- Avoid a Misalignment -->
<div style="clear: both;"></div>
<!-- -->

<div class="dashform">
        <div class="card">
                <div class="card-header">
                CPU
                </div>
                <div class="card-body">
                        <div style="width:200px;height:200px;margin:auto;">
                                <canvas id="cpuChart" width="50" height="50"></canvas>
                        </div>
                </div>
        </div>
</div>
<div class="dashform">
        <div class="card">
                <div class="card-header">
                RAM
                </div>
                <div class="card-body">
                        <div style="width:200px;height:200px;margin:auto;">
                                <canvas id="ramChart" width="50" height="50"></canvas>
                        </div>

			Buffers:{{ memory_buffers | safe }} Cached:{{ memory_cached | safe }}<br>Free :{{ memory_free | safe }} Total :{{ memory_total | safe }}
                </div>
        </div>
</div>
<div class="dashform">
        <div class="card">
                <div class="card-header">
                Disk
                </div>
                <div class="card-body">
			<div style="width:200px;height:200px;margin:auto;">
                                <canvas id="diskChart" width="50" height="50"></canvas>
                        </div>

                        Used :{{ host_disk_used | safe }}GB  / Total :{{ host_disk_total | safe }}GB
                </div>
        </div>
</div>

</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.bundle.min.js"></script>
<script>
var datadisk = {
    labels: [
        "Use ({{ host_disk_percent | safe}}%)",
        "Free"
    ],
    datasets: [
        {
            data: [{{ host_disk_percent | safe}}, {{ host_disk_free_percent | safe}}],
            backgroundColor: [
                "#008000",
                "#C0C0C0"
            ],
            hoverBackgroundColor: [
                "#008000",
                "#C0C0C0"
            ]
        }]
};

var ctx3 = document.getElementById("diskChart");

var myDoughnutChart = new Chart(ctx3, {
    type: 'doughnut',
    data: datadisk,
    options: {
        rotation: 1 * Math.PI,
      circumference: 1 * Math.PI
    }
});

var datacpu = {
    labels: [
        "Use ({{ cpu_percent_used | safe}}%)",
        "Free"
    ],
    datasets: [
        {
            data: [{{ cpu_percent_used | safe}}, {{ cpu_percent_free | safe}}],
            backgroundColor: [
                "#008000",
                "#C0C0C0"
            ],
            hoverBackgroundColor: [
                "#008000",
                "#C0C0C0"
            ]
        }]
};

var ctx = document.getElementById("cpuChart");

var myDoughnutChart = new Chart(ctx, {
    type: 'doughnut',
    data: datacpu,
    options: {
    	rotation: 1 * Math.PI,
      circumference: 1 * Math.PI
    }
});
var dataram = {
    labels: [
        "Use ({{ mem_percent_used | safe}}%)",
        "Free"
    ],
    datasets: [
        {
            data: [{{ mem_percent_used | safe}}, {{ mem_percent_free | safe}}],
            backgroundColor: [
                "#008000",
                "#C0C0C0"
            ],
            hoverBackgroundColor: [
                "#008000",
                "#C0C0C0"
            ]
        }]
};

var ctx2 = document.getElementById("ramChart");

// And for a doughnut chart
var myDoughnutChart2 = new Chart(ctx2, {
    type: 'doughnut',
    data: dataram,
    options: {
    	rotation: 1 * Math.PI,
      circumference: 1 * Math.PI
    }
});
</script>

{% endblock %}
{% include 'foot.html' %}