{% extends "coachreports/base.html" %}

{% load i18n %}
{% load kalite_staticfiles %}
{% load my_filters %}

{% block i18n_do_not_translate %}
    {% block teacher_active %}active{% endblock teacher_active %}
    {% block admin_active %}active{% endblock admin_active %}
    {% block title %}{% trans "Progress by topic" %} | {{ block.super }}{% endblock title %}
    {% block coachnav %}progress-tab-active{% endblock coachnav %}
    {% block progress_active %}sub-active{% endblock progress_active %}
{% endblock i18n_do_not_translate %}

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

{% block headjs %}{{ block.super }}
    <script>
        $(function() {

            // Note: Unlike other coach reports, the tabular view is generated in server side templates.
            // As such, changing any of the values of the items requires a change of URL and subsequent
            // navigation event in order to produce the new report.
            $("#display-topic-report").on("click", function(ev) {
                report_select_view.go_to_coach_report(ev);
            });

            $("#student").change(function(){
                window.location.href = setGetParam(window.location.href, "user", $("#student option:selected").val());
            });

            $("#playlist").change(function(){
                window.location.href = setGetParam(window.location.href, "playlist", $("#playlist option:selected").val());
            });

            $("#facility").change(function(){
                window.location.href = setGetParamDict(window.location.href, {"facility": $("#facility option:selected").val(), "group": $("#" + $("#facility option:selected").val() + "_group_select").val()});
            });

            $(".group_select").change(function(event){
                window.location.href = setGetParam(window.location.href, "group", $(event.target).val());
            });

            // Selector to toggle visible elements is stored in each option value
            cell_height = 27;
            $("#disp_options").change(function(){
                selector = $("#disp_options option:selected").val();

                // adjust the cell height
                cell_height += 50*Math.pow(-1, 0+$(selector).is(":visible"));

                // adjust view in data cells
                $(selector).each(function () {
                    $(this).toggle()
                });
                $(selector).each(function () {
                    $(this).height(20);
                    $(this).parent().height(cell_height);
                });

                // Adjust student name cell heights
                $("th.username").each(function () {
                    $(this).height(cell_height);
                });
            });
            $(window).resize(function() {
                $('.headrowuser').height($('.headrow.data').height());
            }).resize();
        });
    </script>
{% endblock headjs %}

{% block report_content %}

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-4 col-md-3 selection pull-left">
        {# Select the coach report type #}
        {% if report_types %}
            <label for="report_type">{% trans "Select Report" %}</label>
            <select class="form-control" id="report_type">
                <option {% if not request_report_type %}selected{% endif %}>----</option>
                {% for report_type in report_types %}
                    <option value="{{ report_type.value }}" {% if report_type.value == request_report_type %}selected{% endif %}>{{ report_type.name }}</option>
                {% endfor %}
            </select>
        {% else %}
            <label for="report_type">{% trans "No report types available." %}</label>
            <select class="form-control" >
                <option>Not available</option>
            </select>
        {% endif %}
        </div>
        {% if users and request_report_type == "student" %}
            <div class="col-xs-12 selection pull-left">
                <label for="student">{% trans "Select Learner" %}</label>
                <select class="form-control" id="student">
                    <option {% if not request.GET.user %}selected{% endif %}>----</option>
                    {% for user in users %}
                        <option value="{{ user.pk }}"{% if request.GET.user == user.pk %}selected{% endif %}>{{ user.name }}</option>
                    {% endfor %}
                </select>
            </div>
        {% elif groups %}
            {% if playlists %}
                <div class="col-xs-12 col-sm-8 col-md-4 selection">
                    <label for="playlist">{% trans "Select Playlist" %}</label>
                    <select class="form-control" id="playlist">
                        <option {% if not request.GET.playlist %}selected{% endif %}>----</option>
                        {% for playlist in playlists %}
                            <option value="{{ playlist.id }}"{% if request.GET.playlist == playlist.id %}selected{% endif %}>{{ playlist.tag }}: {% trans playlist.title %}</option>
                        {% endfor %}
                    </select>
                </div>
            {% elif topics %}
                <div class="col-xs-12 col-sm-6 col-md-4 selection">
                    <label for="topic">{% trans "Select Topic" %}</label>
                    <select class="form-control" id="topic">
                        <option {% if not request.GET.topic %}selected{% endif %}>----</option>
                        {% for topic in topics %}
                            <option value="{{ topic.id }}"{% if request.GET.topic == topic.id %}selected{% endif %}>{% trans topic.title %}</option>
                        {% endfor %}
                    </select>
                </div>
            {% endif %}
        {% endif %}
        <div class="selection pull-left">
            <button class="btn btn-primary reports-go-btn" id="display-topic-report">{% trans "Go" %}</button>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6 col-xs-12">
            <ul id="legend">
                <li class="legend"><div class="partial"></div>{% trans "In Progress" %}</li>
                <li class="legend"><div class="complete"></div>{% trans "Completed" %}</li>
                {% if request_report_type != "video" %}
                <li class="legend"><div class="struggle"></div>{% trans "Struggling" %}</li>
                {% endif %}
            </ul>
        </div>
    </div>
</div>

{# Table generation happens here #}
<div class="row">
    <div class="col-md-12">
        {% if students %}
            <div id="displaygrid">
                <div class="users-table">
                    <table class="table table-striped table-bordered">
                        <tbody>
                            <tr>
                                <th class="headrowuser">
                                    {% trans "Learner" %}
                                </th>
                            </tr>
                            {% for student in students %}
                                <tr>
                                    <th class="username">
                                        <span title="{{ student.name }} ({{ student.username }})">
                                            <div class="student-name"><a href="{% url 'student_view' %}?user={{ student.id }}">{{ student.name }}</a></div>
                                        </span>
                                    </th>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                    <div style="clear: both;"></div>
                </div>
            </div>

            {% if request_report_type == "exercise" and exercises %}
                {% include "coachreports/partials/_tabular_exercises_report.html" %}

            {% elif request_report_type == "video" and videos %}
                {% include "coachreports/partials/_tabular_videos_report.html" %}

            {% endif %}
        {% endif %}
    </div>
</div>
{% endblock report_content %}
