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

{% block extra_media %}
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/t/bs/jqc-1.12.0,dt-1.10.11/datatables.min.css"/>
  <script type="text/javascript" src="https://cdn.datatables.net/t/bs/jqc-1.12.0,dt-1.10.11/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>
          <th>Rank</th>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <th>Key</th>
          <th>Score</th>
          <th>Rank</th>
        </tr>
      </tfoot>
      <tbody>
        {% for entry in entries %}
        <tr>
          <td><a href="{% url 'karma_key_detail' entry.key %}">{{ entry.key }}</a></td>
          <td>{{ entry.score }}</td>
          <td>{{ entry.rank }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  <script type="text/javascript">
    $(document).ready(function() {
      $('#karma').DataTable( {
        "order": [[ 2, "asc" ]],
        "lengthMenu": [[50, 100, -1], [50, 100, "All"]]
      } );
    } );
  </script>
{% endblock %}