{% extends "admin/base_site.html" %}

{% load i18n static %}

{% block extrahead %}
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['corechart', 'timeline']}]}"></script>

<script src="{% static 'trackstats/js/graphs.js' %}"></script>
<link rel="stylesheet"  href="{% static 'trackstats/css/admin.css' %}">
{% endblock %}

{% block content %}

<form class="trackstats-graph" action="" method="get" >
  <div>
    {{ form.metric }}
    {{ form.metric.errors }}
  </div>
  <div>
    {{ form.from_date }}
    {{ form.from_date.errors }}
  </div>
  <div>
    {{ form.to_date }}
    {{ form.to_date.errors }}
  </div>
  {% block graph_form_fields %}
  {% endblock %}
  <button type="submit">{% trans 'Go' %}</button>
</form>


{% if form.is_valid %}
<script>
  var graphData = [
    {% for stat in statistics %}
    [{{ stat.js_date }}, {{ stat.value }}],
    {% endfor %}
  ];

  var graphOptions = {
    title: '{{ form.cleaned_data.metric.name }}',
    width: "100%",
    height: 500,
    hAxis: {
      format: 'yyyy-M-d',
      gridlines: {count: 15}
    },
    vAxis: {
      gridlines: {color: 'none'},
      minValue: 0
    }
  };

</script>

<div id="trackstats-graph"></div>

{% endif %}

{% endblock %}