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

{% block i18n_do_not_translate %}
    {% 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 mastery_active %}sub-active{% endblock mastery_active %}
{% endblock i18n_do_not_translate %}

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

{% block headjs %}{{ block.super }}
    <script type="text/javascript" src="{% static 'js/coachreports/d3.multitimeseries.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/coachreports/timeline_view.js' %}"></script>
    <script>
        var ystats = {
            "ex:completion_timestamp": "pct_mastery",
            "vid:completion_timestamp": "pct_mastery",
            "user:last_active_datetime": "user:total_seconds"
        }

        setTimeout( function() {
            $("#datepicker_start").change(   function() { TimelineplotTopics(null); });
            $("#datepicker_end").change(   function() { TimelineplotTopics(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);

            TimelineplotTopics(null);
        });
    </script>
{% endblock headjs %}