{% extends 'game/base.html' %}

{% load static %}
{% load i18n %}
{% load l10n %}
{% load game.utils %}

{% block title %}Code for Life - Rapid Router - Scoreboard{% endblock %}

{% block scripts %}
  {{block.super}}
  <script src="{% static 'game/js/jquery.dataTables.min.js' %}"></script>
  <script src="{% static 'game/js/dataTables.fixedColumns.js' %}"></script>
  <script src="{% static 'game/js/jquery.tablesorter.js' %}"></script>
  <script src="{% static 'game/js/widget-scroller.js' %}"></script>
  <script src="{% static 'game/js/pqselect.min.js' %}"></script>
  <script src="{% static 'game/js/jquery.outerhtml.js' %}"></script>
  <script src="{% static 'game/js/jquery.ui.multiprogressbar.js' %}"></script>
  <script src="{% static 'game/js/scoreboard.js' %}"></script>
  <script>
    $(document).ready(function() {
        // Initialise progress values for each progress bar
        {# Only initialise progress bars if the column exists #}
        {% if 'Progress' in headers %}
          {% for student in student_data %}
              var id = {{ student.id }};
              {% localize off %}
                  var started = {{ student.progress.0 }};
                  var attempted = {{ student.progress.1 }};
                  var finished = {{ student.progress.2 }};
              {% endlocalize %}
              $('#progressbar' + id).multiprogressbar({
                  parts: [{value: started, barClass: 'started'},
                          {value: attempted, barClass: 'attempted'},
                          {value: finished, barClass: 'finished'}],
              });
          {% endfor %}

        {% endif %}

        var scoreboardPresent = document.getElementById("scoreboardTable") !== null;

        if (scoreboardPresent) {
           var table = $('#scoreboardTable').DataTable({
                scrollY: ($(window).height() - 100) + "px",
                scrollX: true,
                scrollCollapse: true,
                paging: false,
                deferRender: true,
                language: {
                    emptyTable: '{% trans 'No data available in table' %}',
                    info: '{% blocktrans with start='_START_' end='_END_' total='_TOTAL_' %}Showing {{ start }} to {{ end }} of {{ total }} entries{% endblocktrans %}',
                    infoEmpty: '{% blocktrans with start='0' end='0' total='0' %}Showing {{ start }} to {{ end }} of {{ total }} entries{% endblocktrans %}',
                    infoFiltered: '{% blocktrans with max='_MAX_' %}(filtered from {{ max }} total entries){% endblocktrans %}',
                    loadingRecords: '{% trans 'Loading...' %}',
                    processing: '{% trans 'Processing...' %}',
                    search: '{% trans 'Search:' %}',
                    zeroRecords: '{% trans 'No matching records found' %}'
                }
            });

            new $.fn.dataTable.FixedColumns(table, {
                leftColumns: 2
            });
            document.getElementById("tableWrapper").scrollIntoView();
        }
    });
  </script>
{% endblock %}

{% block css %}
{{block.super}}
  <link href="{% static 'game/css/scoreboard.css' %}" rel="stylesheet" type="text/css">
  <link href="{% static 'game/css/pqselect.min.css' %}" rel="stylesheet" type="text/css">
  <link href="{% static 'game/css/pqselect.multiselect.css' %}" rel="stylesheet" type="text/css">
  <link href="{% static 'game/css/jquery.ui.multiprogressbar.css' %}" rel="stylesheet" type="text/css">
  <link href="{% static 'game/css/jquery.dataTables.css' %}" rel="stylesheet" type="text/css">
  <link href="{% static 'game/css/dataTables.fixedColumns.css' %}" rel="stylesheet" type="text/css">
  <link href="{% static 'game/css/dataTables.jqueryui.css' %}" rel="stylesheet" type="text/css">
  <link href="{% static 'game/css/jquery-ui-1.9.2.custom.css' %}" rel="stylesheet" type="text/css">
{% endblock %}

{% block nav_ocargo_scoreboard %}
<a class="button button--regular button--secondary button--secondary" style="background-color: white; color: #0c52a3;" href="{% url 'scoreboard' %}">{% trans "Scoreboard" %}</a>
{% endblock nav_ocargo_scoreboard %}

{% block content %}
<div class="container">
    <h1 class="text-center">{% trans "Scoreboard" %}</h1>

    <form action="" method="post" id="scoreboardForm">
        {% csrf_token %}
        <div class="row">
            <div class="col-sm-6">
                <h4>{% trans "Select Classes" %}</h4>
                <div class="select-list">
                    <ul class="scoreboard-list-class">
                        <li class="all-class">
                            <label for="id_classes_select_all" class="inverse">
                                <input id="id_classes_select_all" type="checkbox">
                                {% trans "Select all Classes" %}
                            </label>
                        </li>
                        {% for c in form.classes %}
                        <li class="class">
                            {{ c }}
                        </li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
            <div class="col-sm-6">
                <h4>{% trans "Select Levels" %}</h4>
                <div class="select-list">
                    <ul class="scoreboard-list-level">
                        <li class="all-level">
                            <label for="id_levels_select_all">
                                <input id="id_levels_select_all" type="checkbox">
                                {% trans "Select all Levels" %}
                            </label>
                        </li>
                        {% for c in form.levels %}
                        {% if forloop.counter in episodes %}
                        {% with e=episodes|get_item:forloop.counter %}
                        <li class="episode" data-first="{{ e.first_level }}" data-last="{{ e.last_level }}">
                            <label for="ep_{{ forloop.counter }}">
                                <input id="ep_{{ forloop.counter }}" type="checkbox">
                                {{ e.name }}
                            </label>
                            <span class="expander glyphicon glyphicon-triangle-bottom" aria-hidden="true"></span>
                        </li>
                        {% endwith %}
                        {% endif %}
                        <li class="level level-{{ forloop.counter }}">
                            {{ c }}
                        </li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6 text-right">
                <button class="button--regular button--primary--general-play" type="submit" name="export">{% trans "Export results" %}</button>
            </div>
            <div class="col-sm-6 text-left">
                <button class="button--regular button--primary--general-educate" type="submit" name="view">{% trans "View results" %}</button>
            </div>
        </div>
    </form>

</div>

<div class="container mainBody">
  <div class="tableWrapper" id="tableWrapper">
    {% if student_data %}
    <table id="scoreboardTable" class="display cell-border wide">
    <thead>
      <tr>
        {% for header in headers %}
          <th {% if header == progress_header %} title="{% trans 'Colours explained:&#013;Red: Number of levels which student has started but not submitted a working solution &#013;Orange: Number of levels which student has scored below 50% &#013;Green: Number of levels which student has scored above 50%' %}"{% endif %}> {{header}} </th>
        {% endfor %}
      </tr>
      </thead>
      {% for student in student_data %}
      <tr>
          <td> {{student.class_field}} </td>
          <td> {{student.name}} </td>
          <td> {{student.total_score}} </td>
          <td> {{student.total_time}}
          {% if not student.scores  %}
            <td> {{student.start_time}} </td>
            <td> {{student.finish_time}} </td>
          {% else %}
            <td> <div class="MultiProgressBarDiv" id="progressbar{{ student.id }}"></div> </td>
            {% for levelScore in student.scores %}
              {# Levels that students have not started will be marked with grey colour #}
              <td > {{levelScore}} </td>
            {% endfor %}
          {% endif %}
        </tr>
      {% endfor %}
    </table>
    {% endif %}
  </div>
</div>
{% endblock %}
