{% extends "distributed/base_teach.html" %}
{% load staticfiles %}
{% load i18n %}
{% load my_filters %}

{% block i18n_do_not_translate %}
    {% block reports_active %}reports-active active-tab active-nav{% endblock reports_active %}
    {% block teacher_active %}active{% endblock teacher_active %}
    {% block admin_active %}active{% endblock admin_active %}
{% endblock i18n_do_not_translate %}

{% block title %}{% trans "Coach Reports" %}{% endblock title %}

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

{% block headjs %}{{ block.super }}
    <script type="text/javascript">
        var FACILITY_RESOURCE_URL = "{% url 'api_dispatch_list' resource_name='facility' %}";
        var GROUP_RESOURCE_URL = "{% url 'api_dispatch_list' resource_name='group' %}";
        var TABULAR_REPORT_URL = "{% url 'tabular_view' %}";
        var SCATTER_REPORT_URL = "{% url 'scatter_view' %}";
        var TIMELINE_REPORT_URL = "{% url 'timeline_view' %}";
        var TEST_REPORT_URL = "{% url 'test_view' %}";
        var SPENDING_URL = "{% url 'spending_report_view' %}";

        var REPORT_ID = "{{ nav_state.report_id }}"
        var FACILITY_ID = "{{ nav_state.facility_id }}";
        var GROUP_ID = "{{ nav_state.group_id }}";

        console.log("rptid: " + REPORT_ID);
        console.log("facid: " + FACILITY_ID);
        console.log("grpid: " + GROUP_ID);
    </script>
    <script type="text/javascript" src="{% static 'js/coachreports/base.js' %}"></script>
    <script src="{% url 'handlebars_templates' module_name='coach_nav' %}"></script>
    <script>
        $(function() {
            window.report_select_view = new NavigationContainerView({
                el: $('#coachreport-navigation-container')
            });
        });
    </script>
{% endblock headjs %}

{% block content %}
    {# This call to super pulls in the subnavbar #}
    {% block subnavbar %}{{block.super}}{% endblock subnavbar %}

    {# Now we create the coachreport selection bar #}
    <div class="container container-margin-bottom">
        <div class="row coach-reports-row">
            <div class="subtitle coach-heading">
                {# Note to translators: following this phrase is the name of a class. #}
                {% trans "Coach Reports" %}
            </div>
            <div id="coachreport-navigation-container">
                {# insert backbone magic here for coachreport navigation #}
            </div>
        </div>
        {% block report_content %}
            {# Insert report specifics here #}
        {% endblock report_content %}
    </div>

{% endblock content %}