{% extends "course/course-base.html" %}
{% load i18n %}

{% load static %}

{% block title %}
  {% trans "Grade book" %} - {% trans "RELATE" %}
{% endblock %}

{% block header_extra %}
    {# the min.js version contains all dependencies #}
    <script src="{% static "datatables/media/js/jquery.dataTables.min.js" %}"></script>
    <link href="{% static "datatables/media/css/jquery.dataTables.min.css" %}" rel="stylesheet">

    <script src="{% static "datatables-fixedcolumns/js/dataTables.fixedColumns.js" %}"></script>
    <link href="{% static "datatables-fixedcolumns/css/dataTables.fixedColumns.css" %}" rel="stylesheet">
{% endblock %}

{% block content %}
  <h1>{% trans "Grade book" %}</h1>

  <table class="gradebook">
    <thead>
      <th class="headcol">{% trans "User ID" %}</th>
      <th class="datacol">{% trans "Name" context "real name of a user" %}</th>
      {% for opp in grading_opportunities %}
      <th class="datacol"><a href="{% url "relate-view_grades_by_opportunity" course.identifier opp.pk %}">{{ opp.name }}</a> <tt style="font-size:x-small">({{ opp.identifier }})</th>
      {% endfor %}
    </thead>
    <tbody>
      {% for participation, grades in grade_table %}
      <tr>
        <td class="headcol"><a href="{% url "relate-view_participant_grades" course.identifier participation.id %}"><span class="sensitive">{{ participation.user.username }}</span></a></td>
        <td class="datacol">
          <span class="sensitive">
          {% blocktrans trimmed with last_name=participation.user.last_name first_name=participation.user.first_name %}
            {{ last_name }}, {{ first_name }}
          {% endblocktrans %}
          </span>
          {% if participation.role != participation_role.student %}
            ({{ participation.role }})
          {% endif %}
        </td>
        {% for grade_info in grades %}
          <td class="datacol">
            <a href="{% url "relate-view_single_grade" course.identifier participation.id grade_info.opportunity.id %}"
               ><span class="sensitive">{{ grade_info.grade_state_machine.stringify_state }}</span></a>
          </td>
        {% endfor %}
      </tr>
      {% endfor %}
    </tbody>
  </table>

  <script type="text/javascript">
    var tbl = $("table.gradebook").dataTable({
        "scrollX": true,
        "scrollCollapse": true,
        "paging": true,
        "ordering": false,
    } );
    new $.fn.dataTable.FixedColumns(tbl);
  </script>

{% endblock %}