{% extends base_page %}

{% block content %}

<script language="javascript" type="text/javascript">
var dataset = [
{% for download in downloads %}
  ["{{download.geo}}", {{download.components}}, {{download.builds}}, {{download.total}}],
{% endfor %}
]
$(document).ready(function() {
  $('#reports_table').DataTable({
    order: [[ 3, "desc" ]],
    aLengthMenu: [
      [25, 50, 75, 100, -1],
      [25, 50, 75, 100, "All"]
    ],
    iDisplayLength: 50,
    data: dataset,
    columnDefs: [{
      render: function ( data, type, row ) {
        return '<a href="' + data + '/">' + data + '</a>';
      },
      'targets': 0
    }],
  });
} );
</script>

<h2>{{year_month}} Downloads by {{label}}</h2>
<table id="reports_table" width="100%">
  <thead>
    <tr><th>{{label}}</th><th>Components</th><th>Builds</th><th>Total</th>
  </thead>
</table>
{% endblock %}