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

{% block extra_media %}
<script type="text/javascript" src="{% get_static_prefix %}js/Chart.min.js"></script>
{% endblock %}

{% block title %}karma: {{ entry.key }}{% endblock %}

{% block content %}
  <h3>{{ entry.key }}</h3>
  <canvas id="karma_history"></canvas>
  <script type="text/javascript">
    Chart.defaults.global.responsive = true;
    Chart.defaults.global.maintainAspectRatio = true;
    Chart.types.Line.extend({name : "AltLine",
      initialize : function(data) {
        Chart.types.Line.prototype.initialize.apply(this, arguments);
        this.scale.draw = function() {
           if (this.display && (this.xLabelRotation > 90)) {
              this.endPoint = this.height - 5;
           }
           Chart.Scale.prototype.draw.apply(this, arguments);
        };
      }
    });
    var ctx = $("#karma_history").get(0).getContext("2d");
    var data = {
      labels: [{% for x in entry_history %}"{{ x.0 }}", {% endfor %}],
      datasets: [
        {
          label: "{{ entry.key }}",
          fillColor: "rgba(150,150,220,0.2)",
          strokeColor: "rgba(100,100,220,1)",
          pointColor: "rgba(50,50,220,1)",
          pointStrokeColor: "#fff",
          pointHighlightFill: "#fff",
          pointHighlightStroke: "rgba(220,220,220,1)",
          data: [{% for x in entry_history %}{{ x.2 }}, {% endfor %}]
        }
      ]
    };
    var myLineChart = new Chart(ctx).AltLine(data, {
      pointDot: false,
      {% if entry_history|length > 100 %}
        showTooltips: false,
        scaleShowVerticalLines: false,
      {% endif %}
      tooltipEvents: ["click"]
    });
  </script>
  <h5>Log</h5>
  <table border="1px">
    <tr>
      <th>Date</th>
      <th>Delta</th>
      <th>Score</th>
    </tr>
    {% for delta in entry_history %}
      <tr>
        <td>{{ delta.0 }}</td>
        <td>{{ delta.1 }}</td>
        <td>{{ delta.2 }}</td>
      </tr>
    {% endfor %}
  </table>
{% endblock %}