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

{% load static %}
{% load i18n %}
{% load l10n %}

{% 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>
    $(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
            });
            $(".tableWrapper").css('visibility', 'visible');
            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">
{% endblock %}

{% block nav_ocargo_scoreboard %}
<b><a href="{% url 'game.views.scoreboard.scoreboard' %}">{% trans "Scoreboard" %}</a></b>
{% endblock nav_ocargo_scoreboard %}

{% block content %}
<h1>{% trans "Scoreboard" %}</h1><br>
<div class='span_3_of_3'>
  <div class='login-card'>
    <div id="form" class="form">
    <form action="" method="post" id="scoreboardForm">
      {% csrf_token %}
      <div class='section group'>
        <div class='col span_1_of_3_strict'>
          <div class='section group'>
            <div class='col span_1_of_3'>
              {% trans "Classes:" %}
            </div>
            <div class='col span_2_of_3'>
              {{form.classes.errors}}
              {{form.classes}}
            </div>
          </div>
        </div>
        <div class='col span_1_of_3_strict'>
          <div class='section group'>
            <div class='col span_1_of_3'>
              {% trans "Levels:" %}
            </div>
            <div class='col span_2_of_3'>
              {{form.levels.errors}}
              {{form.levels}}
            </div>
          </div>
        </div>
        <div class='col span_1_of_3_strict'>
          <button class='col span_1_of_2 btn btn-primary' type="submit" name="view">{% trans "View" %}</button>
          <button class='col span_1_of_2 btn btn-primary' type="submit" name="export">{% trans "Export" %}</button>
        </div>
      </div>
    </form>
    </div>
  </div>
</div>
<br>
<div class="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 %}
