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

{% block title %}{{ title }} {{ block.super }}{% endblock title %}
{% block report_title %}{{ title }}{% endblock report_title %}


{% block headcss %}{{ block.super }}
    <link rel="stylesheet" type="text/css" href="{% static 'css/coachreports/timeline_view.css' %}?{{ BUILD_ID }}">
{% 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"
        }

        $(function() {
            $("#xaxis").change(function() {
                $("#yaxis option").prop("disabled", true);
                $("#yaxis option[value='" + ystats[$("#xaxis").val()] + "']").prop("disabled", false).prop("selected", true);
                plotTopics(null);
            });
        });
    </script>
{% endblock headjs %}


{% block axis_dropdown %}
    {% trans "X-Axis" %}:
    <select id="xaxis" name="xaxis">
        {% for stat in stats %}
        {% if stat.type == "datetime" %}
        <option value="{{ stat.key }}"{% if stat.key = form|get_item:axis_value %} selected{% endif %}>{% trans stat.name %}</option>
        {% endif %}
        {% endfor %}
    </select>
    {% trans "Y-Axis" %}:
    <select id="yaxis" name="yaxis" class="no-select">
            {% for stat in stats %}
                {% if stat.timeline %}
                    <option value="{{ stat.key }}"{% if stat.key = form|get_item:axis_value %} selected {% else %} disabled {% endif %}>{% trans stat.name %}</option>
                {% endif %}
            {% endfor %}
    </select>
{% endblock axis_dropdown %}