{% extends "coachreports/base_d3_visualization.html" %}
{% load i18n %}
{% load repeatblock %}
{% load my_filters %}
{% load kalite_staticfiles %}

{% block title %}{{ title }} | {{ block.super }}{% endblock title %}
{% block report_title %}{{ title }}{% endblock report_title %}
{% block teacher_active %}active{% endblock teacher_active %}
{% block admin_active %}active{% endblock admin_active %}
{% block effort_active %}sub-active{% endblock effort_active %}

{% block headcss %}{{ block.super }}
    <link rel="stylesheet" type="text/css" href="{% static 'css/coachreports/scatter_view.css' %}" />
{% endblock headcss %}

{% block headjs %}{{ block.super }}
    <script type="text/javascript" src="{% static 'js/coachreports/d3.scatter.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/coachreports/scatter_view.js' %}"></script>
    <script>
        setTimeout( function() {
            $("#datepicker_start").change(   function() { plotTopics(null); });
            $("#datepicker_end").change(   function() { plotTopics(null); });
        }, 200);
    </script>
    <script>
        $(function() {
            $( "#datepicker_start" ).datepicker({
                dateFormat: "yy-mm-dd"
            });
            $( "#datepicker_end" ).datepicker({
                dateFormat: "yy-mm-dd"
            });
            
            var d = new Date();
            var current_date = $.datepicker.formatDate('yy-mm-dd', d);
            d.setDate(d.getDate() - 31);
            var one_month_early = $.datepicker.formatDate('yy-mm-dd', d);

            $("#datepicker_end").val(current_date);
            $("#datepicker_start").val(one_month_early);
            
            plotTopics(null);
        });
    </script>
{% endblock headjs %}

