{% extends 'base.html' %}
{% load static %}

{% block extra_media %}
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs-3.3.7/jq-2.2.4/dt-1.10.15/datatables.min.css"/>
  <script type="text/javascript" src="https://cdn.datatables.net/v/bs-3.3.7/jq-2.2.4/dt-1.10.15/datatables.min.js"></script>
{% endblock %}

{% block title %}karma{% endblock %}

{% block content %}
  <div style="width: 75%; margin-left: auto; margin-right: auto;">
    <table id="karma" class="display table table-striped table-bordered" cellspacing="0" width="100%">
      <thead>
        <tr>
          <th>Key</th>
          <th>Score</th>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <th>Key</th>
          <th>Score</th>
        </tr>
      </tfoot>
    </table>
  </div>
  <script type="text/javascript">
    $(document).ready(function() {
      $('#karma').DataTable( {
        "processing": true,
        "serverSide": true,
        "ajax": "{% url 'karma_key_data_tables' %}",
        "order": [[ 1, "desc" ]],
        "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]]
      } );
    } );
  </script>
{% endblock %}