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

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

{% block headcss %}{{ block.super }}
    <link rel="stylesheet" type="text/css" href="{% static 'css/coachreports/base.css' %}" />
    <link rel="stylesheet" type="text/css" href="{% static 'css/coachreports/tabular_view.css' %}" />
    <link rel="stylesheet" type="text/css" href="{% static 'css/coachreports/events_view.css' %}" />
    <link rel="stylesheet" type="text/css" href="{% static 'css/coachreports/landing_view.css' %}" />
    <link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap-datepicker3.min.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 FACILITY_ID = {% if facility_id %}"{{ facility_id }}"{% else %}undefined{% endif %};
    </script>
    <script src="{% static 'js/bootstrap-datepicker.min.js' %}"></script>
    <script src="{% url 'handlebars_templates' module_name='coach_nav' %}"></script>
    <script src="{% url 'handlebars_templates' module_name='tabular_reports' %}"></script>
    <script src="{% static 'js/distributed/exercises/models.js' %}"></script>
        <script type="text/javascript" src="{% static 'js/coachreports/coach_reports/models.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/coachreports/coach_reports/router.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/coachreports/coach_reports/views.js' %}"></script>
    <script>
        $(function() {
            window.coach_router = new CoachReportRouter({facility: FACILITY_ID});
            Backbone.history.start({pushState: true, root: "{% url 'coach_reports' %}"});
        });
    </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_container">
                {# insert backbone magic here for coachreport navigation #}
            </div>
        </div>
    </div>

{% endblock content %}

