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

{% load static %}

{% block title %}
  Grade book - Courseflow
{% 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>Grade book</h1>

  <table class="gradebook">
    <thead>
      <th class="headcol"></th>
      <th class="datacol">Name</th>
      {% for opp in grading_opportunities %}
      <th class="datacol"><a href="{% url "course.grades.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 "course.grades.view_participant_grades" course.identifier participation.id %}">{{ participation.user.username }}</a></td>
        <td class="datacol">
          {{ participation.user.last_name }},
          {{ participation.user.first_name }}
          {% if participation.role != participation_role.student %}
            ({{ participation.role }})
          {% endif %}
        </td>
        {% for grade_info in grades %}
          <td class="datacol">
            <a href="{% url "course.grades.view_single_grade" course.identifier participation.id grade_info.opportunity.id %}"
              >{{ grade_info.grade_state_machine.stringify_state }}</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 %}