{% extends "squeleton.html" %}


{% block page_content %}

<!-- Statistic summary -->

<div class="row">
    <div class="col-md-12">
        <h1 class="page-header"><i class="fa fa-archive fa-fw"></i> Packages Details</h1>
    </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="packages-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'><i class="fa fa-archive"></i> Packages name </th>
                        <th class='text-center'><i class="fa fa-star"></i> Number of servers </th>
                    </tr>
                </thead>
                <tbody>
                    {% for p in packages_list %}
                    <tr>
                        <td ><a href="{% url 'packages-by-package' p.0 %}">{{ p.0 }}</td>
                        <td class=text-center>{{ p.1 }}</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, [$('#packages-list'), outputFile]);
    });
});
</script>
<!-- cool server table -->
<script type="text/javascript" src="{% static 'js/datatables.min.js' %}"></script>
<script>

$(document).ready(function() {
    $('#packages-list').DataTable({
        "paging": false,
    });
});
</script>

{% endblock %}