{% extends "squeleton.html" %}


{% block page_content %}

<!-- Statistic summary -->

<div class="row">
    <div class="col-md-12">
        <h1 class="page-header"><i class="fa fa-list-alt fa-fw"></i> Details ({{ results_date|date:"Y-m-d"  }} - {{ status_list|length }} servers)</h1>
    </div>
</div>
<div class="row">
    <div class="col-md-12">
        <ul class="pagination">
            {% if previous_result_date %}
            <li><a href="{% url 'server-list-by-date' previous_result_date.year previous_result_date.month previous_result_date.day %}"> <i class="fa fa-caret-left"></i> Previous result</a></li>
            {% else %}
            <li class="disabled"><a href="#"><i class="fa fa-caret-left"></i> Previous result</a></li>
            {% endif %}
            {% if next_result_date %}
            <li><a href="{% url 'server-list-by-date' next_result_date.year next_result_date.month next_result_date.day %}">Next result <i class="fa fa-caret-right"></i> </a></li>
            {% else %}
            <li class="disabled"><a href="#">Next result <i class="fa fa-caret-right"></i></a></li>
            {% endif %}
        </ul>
    </div>
</div>
<div class="row">
    <div class="col-md-12">
        <a href="#" id ="export-to-csv" class="btn btn-primary"><i class="fa fa-table"></i> Exports results to CSV</a>
        <div class="table-responsive">
            <table id="server-list" class="table table-bordered table-hover table-striped">
            <!--<table id="server-list" class="display" cellspacing="0" width="100%">-->
                <thead>
                    <tr>
                        <th class='text-center'>OS</th>
                        <th class='text-center'>Hostname</th>
                        <th class='text-center'>Updates #</th>
                        <th class='text-center'>Uptime</th>
                    </tr>
                </thead>
                <tbody>
                    {% for stat in status_list %}
                    <tr>
                        <td class='status-{{ stat.os_status }} text-center'>{{ stat.server.os }}</td>
                        <td><a href="{% url 'packages-by-host' stat.server.hostname %}">{{ stat.server.hostname }}</b></td>
                        <td class='status-{{ stat.updates_status }} text-center'>{{ stat.updates }}</td>
                        <td class='status-{{ stat.uptime_status }} text-center'>{{ stat.uptime }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>



<div id="to-top"><a href="#top"><i class="fa fa-lg fa-2x fa-arrow-up"></i></a></div>
{% endblock %}



{% block scripts %}

{% load static %}
<!-- export to CSV -->
<!-- source: https://bl.ocks.org/kalebdf/ee7a5e7f44416b2116c0 -->
<script type="text/javascript" src="{% static 'js/html-to-csv.js' %}"></script>
<script>
$(document).ready(function(){
    $("#export-to-csv").click(function (event) {
        // var outputFile = 'export'
        var outputFile = 'export';
        outputFile = outputFile.replace('.csv','') + '.csv'
        // CSV
        exportTableToCSV.apply(this, [$('#server-list'), outputFile]);
    });
});
</script>
<!-- cool server table -->
<script type="text/javascript" src="{% static 'js/datatables.min.js' %}"></script>
<script>
// sort updates and uptime by number and put None at the end
jQuery.fn.dataTableExt.oSort['num-none-asc'] = function(x,y) {
    if (x == y) return 0;
    else if (x == 'None') return 1;
    else if (y == 'None') return -1;
    else return ((parseInt(x) < parseInt(y)) ? -1 : ((parseInt(x) > parseInt(y)) ? 1 : 0));
};
jQuery.fn.dataTableExt.oSort['num-none-desc'] = function(x,y) {
    if (x == y) return 0;
    else if (x == 'None') return 1;
    else if (y == 'None') return -1;
    else return ((parseInt(x) < parseInt(y)) ? 1 : ((parseInt(x) > parseInt(y)) ? -1 : 0));
};

$(document).ready(function() {
    $('#server-list').DataTable({
        "paging": false,
        "order": [[ 1, "asc" ]],
    });
});
</script>

{% endblock %}