<!--<div class="col-md-12"><div class="panel panel-default">
    <div class="panel-heading">HDD Summary</div>
    <div class="panel-body">

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

<div id="hdd-container"></div>

<div id="template" class="hidden">
    <div id="" class="col-md-4"><div class="panel panel-default">
        <div class="panel-heading hdd-title">HDD: {{.mount}} ({{.size_total}})</div>
        <div class="panel-body">
            <center><img src="img/hdd_ok.png" /></center><br>
            <div class="progress">
                <div class="progress-bar hdd-used" role="progressbar"></div>
                <center class="hdd-free">{{.size_free}}</center>
            </div>
            <table class="table small hdd-detail">
                <thead><tr>
                    <th data-field="mount">Mount</th>
                    <th data-field="type" >Type</th>
                </tr></thead>
                <tr>
                    <td class="hdd-mount"></td>
                    <td class="hdd-filesystem"></td>
                </tr>
            </table>
            <!--<div><canvas id="hdd-io" height="400"></canvas></div>-->
        </div>
    </div></div>
</div>



<script language="javascript" type="text/javascript">
$(function() {
    updateHdd();
});

function updateHdd(){
    $.getJSON("{{nav.url}}&json&hdd", function( data ) {
        $.each(data['hdd'], function( index, hdd ){
            var element = null;
            var html_id = "hdd-id-" + hdd.id;
            if($("#"+html_id).length)
                element = $("#" + html_id);
            else{ // Create new element
                element = $("#template").children().clone();
                $(element).attr("id", html_id);
                $(element).appendTo("#hdd-container");
                // Set static values
                $(element).find(".hdd-title").html("HDD: "+hdd.device+" ("+byteToString(hdd.size_total)+")");
                $(element).find(".progress-bar").attr("aria-valuemax", hdd.size_total);
            }

            $(element).find(".progress-bar").attr("aria-valuenow", hdd.size_used);
            $(element).find(".progress-bar").css("width", (hdd.size_used/hdd.size_total)*100+"%");
            $(element).find(".hdd-used").html(byteToString(hdd.size_used));
            $(element).find(".hdd-free").html(byteToString(hdd.size_free));
            $(element).find(".hdd-filesystem").html(hdd.filesystem);
            $(element).find(".hdd-mount").html(hdd.mount);
        });
    });
    setTimeout(updateHdd, 2000);
}

var sizes = ["YB", "ZB", "EB", "PB", "TB", "GB", "MB", "kB", "B"];
function byteToString(value){
    var total = sizes.length-1;

    for(; value > 1024 ;--total) {
        value /= 1024;
    }

    value = Math.round(value*10)/10;
    return value+" "+sizes[total];
}
</script>
