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

{% block two_col_media %}
  <style type="text/css">
    table {
      font-size: 15px;
    }
    td {
      height: 2.5em;
    }
    .user-name {
      padding-left: 1em !important;
    }
    #search-input {
      float: right;
      margin-bottom: 1em;
    }
  </style>
{% endblock %}

{% block js_media %}
  <script>
    $(document).ready(function(){
      var $searchInput = $("#search-input");
      var $usersTable = $("#users-table");
      var tableBorderColor = $('#users-table td').css('border-bottom-color');

      $searchInput.on("keyup", function() {
        var value = $(this).val().toLowerCase();
        $("#users-table tbody tr").filter(function() {
          $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
        });

        if(value) {
          $('#users-table').css('border-bottom', '1px solid ' + tableBorderColor);
        } else {
          $('#users-table').css('border-bottom', '');
        }
      });

      $('#sortSelect').select2({
        minimumResultsForSearch: -1,
        width: "10em",
      });

      $('#sortSelect').on('change', function() {
        var rows = $('#users-table tbody tr').get();
        var sortBy = $(this).val();
        rows.sort(function(a, b) {
          var keyA = $(a).find(sortBy === 'username' ? '.user-name' : 'td:last-child').text().trim();
          var keyB = $(b).find(sortBy === 'username' ? '.user-name' : 'td:last-child').text().trim();

          if(sortBy === 'total') {
            // Convert percentage string to number for comparison
            keyA = -parseFloat(keyA.replace('%', ''));
            keyB = -parseFloat(keyB.replace('%', ''));
          }
          else {
            keyA = keyA.toLowerCase();
            keyB = keyB.toLowerCase();
          }

          if(keyA < keyB) return -1;
          if(keyA > keyB) return 1;
          return 0;
        });

        $.each(rows, function(index, row) {
          $('#users-table tbody').append(row);
        });
      });
    });
  </script>
{% endblock %}

{% block middle_content %}
  <center><h2>{{content_title}}</h2></center>
  {{_("Sort by")}}:
  <select id="sortSelect">
    <option value="username">{{_("Username")}}</option>
    <option value="total">{{_("Score")}}</option>
  </select>
  <input type="text" id="search-input" placeholder="{{_('Search')}}" autofocus>
  <div style="overflow-x: auto; margin-top: 1em">
    <table class="table striped" id="users-table">
      <thead>
        <tr>
          <th>{{_('Student')}}</th>
          <th>{{_('Total')}}</th>
          {% for lesson in lessons %}
            <th class="points" title="{{lesson.title}}">
              <a href="{{url('course_grades_lesson', course.slug, lesson.id)}}">
                L{{ loop.index0 + 1 }}
                <div class="point-denominator">{{lesson.points}}</div>
              </a>
            </th>
          {% endfor %}
          {% for course_contest in course_contests %}
            <th class="points" title="{{course_contest.contest.name}}">
              <a href="{{url('contest_ranking', course_contest.contest.key)}}">
                C{{ loop.index0 + 1 }}
                <div class="point-denominator">{{course_contest.points}}</div>
              </a>
            </th>
          {% endfor %}
        </tr>
      </thead>
      <tbody>
        {% for student in grade_total.keys() %}
          {% set grade_lessons_student = grade_lessons.get(student) %}
          {% set grade_contests_student = grade_contests.get(student) %}
          {% set grade_total_student = grade_total.get(student) %}
          <tr>
            <td class="user-name">
              <div>
                {{link_user(student)}}
              </div>
              <div>
                {{student.first_name}}
              </div>
            </td>
            <td style="font-weight: bold">
              {% if grade_total_student %}
                {{ grade_total_student['percentage'] | floatformat(0) }}%
              {% else %}
                0
              {% endif %}
            </td>
            {% for lesson in lessons %}
              {% set val = grade_lessons_student.get(lesson.id) %}
              <td class="partial-score">
                <a href="{{url('course_lesson_detail', course.slug, lesson.id)}}?user={{student.username}}">
                  {% if val and val['total_points'] %}
                    {{ (val['achieved_points'] / val['total_points'] * lesson.points) | floatformat(0) }}
                  {% else %}
                    0
                  {% endif %}
                </a>
              </td>
            {% endfor %}
            {% for course_contest in course_contests %}
              {% set val = grade_contests_student.get(course_contest.id) %}
              <td class="partial-score">
                <a href="{{url('contest_ranking', course_contest.contest.key)}}#!{{student.username}}">
                  {% if val and val['total_points'] %}
                    {{ (val['achieved_points'] / val['total_points'] * course_contest.points) | floatformat(0) }}
                  {% else %}
                    0
                  {% endif %}
                </a>
              </td>
            {% endfor %}
          </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
{% endblock %}