{% extends base_template %}
{% load i18n %}
{% load my_filters %}

{% block coachreports_active %}active{% endblock coachreports_active %}

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

{% block headcss %}{{ block.super }}
    <style>
        .selection {
            float: left;
            padding: 0 10px 10px 0;
        }
        select {
            margin-left: 10px;
        }
        .subtitle {
            float:left;
        }
        #facility, .group_select {
            display:none;
        }
        h2 {
            width:100%;
            margin: 0px;
            margin-top: 10px;
        }
        h3 {
            margin-left: 25px;
            margin-bottom: 0px;
        }
        #link-box {
            float:right;
            margin-right:25px;
        }
        .group_div {
            position: absolute;
            margin-left: 20px;
        }
    </style>
{% endblock headcss %}

{% block headjs %}{{ block.super }}
    <script>
        function generate_current_link() {
            var url = window.location.href;

            // Add topic paths
            if (typeof get_topic_paths_from_tree != 'undefined') {
                var topic_paths = get_topic_paths_from_tree();
                for (pi in topic_paths) {
                    url += "&topic_path=" + topic_paths[pi];
                }
                // Add axis information
                url = setGetParam(url, "xaxis", $("#xaxis option:selected").val());
                url = setGetParam(url, "yaxis", $("#yaxis option:selected").val());
                url = setGetParam(url, "facility", $("#facility option:selected").val());
                url = setGetParam(url, "group", $("#" + $("#facility option:selected").val() + "_group_select option:selected").val());
            }

            return url;
        }
        function display_link () {
            var url_field = $('input#url');
            var link_box = $('#link-box');
            var link_text = null;

            if(url_field.is(":visible")){
                url_field.hide();
                link_text = gettext("share")
            }
            else{
                url_field.val(generate_current_link());
                url_field.show().focus().select().attr('readonly',true);
                link_text = gettext("hide")
            }
            link_box.find('a').text("(" + link_text + ")");
        }
        function changeData(type) {
            var opt = $("#" + type + " option:selected");
            $("#" + type + "_editable").text(opt.text());
            // Check to see if the item being passed is a group item - regex match against group in the item.
            var linktype = /group/i.test(type) ? "group" : type
            $(".changeable-link").each(function () {
                this.href = setGetParam(this.href, linktype, opt.val());
            });
            $("#" + type + "_editable").show();
            $("#" + type).hide();
            if (type==="facility") {
                // Show the appropriate group selection for a particular facility when the facility is changed.
                $(".group_div").hide();
                $("#" + $("#facility").val()).show();
                changeData($("#facility").val() + "_group_select")
            };
        }
        function make_editable(type) {
            if ($("#" + type + " option").length>1) {
                $("#" + type + "_editable").hide();
                $("#" + type).show();
            }
        }

        $(function() {
            // Make sure that each dropdown has a callback
            //   to replot upon selection.
            // Dynamically read the group id from the change event.
            $(".group_select").change(   function(event) { changeData(event.target.id); });
            $("#facility").change(function() { changeData("facility"); });
            // Select the values in the dropdowns
            $("#{{ form.facility }}_group_select").val("{{ form.group }}").change();
            $("#facility").val("{{ form.facility }}").change();
        });
    </script>
{% endblock headjs %}

{# sub-pages must embed the navbar within the content, to have it appear. #}
{% block navbar %}

    <div id="navbar" style="padding-bottom:25px">
        <div id="users_link">
        </div>

        {% block navbar_title %}
        <h2>
            <div style="float:left">
                {% block report_title %}
                    {# Note to translators: following this phrase is the name of a class. #}
                    {% trans "Coach Reports" %}
                {% endblock %}
                {# Note to translators: The context is the title "Coach Reports *for* Facility X." #}
                {% trans "for" %}&nbsp;
            </div>
            {% block navbar_facilities %}
            <div id="select-facilities" class="selection">
                <select id="facility">
                {% if facilities %}
                    {% for facility in facilities %}
                    <option value="{{ facility.id }}" {% if form.facility == facility.id %}selected{% endif %}>{{ facility }}</option>
                    {% endfor %}
                {% else %}
                    <option value="" selected>[{% trans "this device" %}]</option>
                {% endif %}
                </select>
                {% if facilities|length > 1 %}
                <a id="facility_editable" href="javascript:make_editable('facility')"></a>
                {% else %}
                <span id="facility_editable"></span>
                {% endif %}
            </div>
            {% endblock navbar_facilities %}

            {% block navbar_groups %}
            <div id="select-groups" class="selection">
                <div class="subtitle"> {% if facilities and groups %}/&nbsp;{% endif %}</div>
                {% if groups %}
                    {% for groupobject in groups %}
                    <div id="{{ groupobject.facility }}" class="group_div">
                        <select id="{{ groupobject.facility }}_group_select" class="group_select">
                            {% if groupobject.groups %}
                                    <option value="">[{% trans "all groups" %}]</option>
                                    {% for group in groupobject.groups %}
                                    <option value="{{ group.id }}">{{ group }}</option>
                                    {% endfor %}
                            {% else %}
                                <option value="" selected>[{% trans "no groups" %}]</option>
                            {% endif %}
                        </select>
                        {% if groupobject.groups|length > 1 %}
                        <a id="{{ groupobject.facility }}_group_select_editable" href="javascript:make_editable('{{ groupobject.facility }}_group_select')"></a>
                        {% else %}
                        <span id="{{ groupobject.facility }}_group_select_editable"></span>
                        {% endif %}
                    </div>
                    {% endfor %}
                {% endif %}
            </div>
            {% endblock navbar_groups %}

            <div class="clearfix">
                {% block navbar_makelink %}
                <div id="link-box">
                    <input name="url" id="url" type="text" style="display:none"></input>
                    {# Translators: this is used to share a URL (with other teachers) #}
                    <a href="javascript:display_link()">({% trans "share" %})</a>
                </div>
                {% endblock navbar_makelink %}
            </div>
        </h2>
        {% endblock navbar_title %}

        {% block navbar_topics %}
        {% endblock navbar_topics %}
    </div>
{% endblock navbar %}