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

{% load static %}

{% block title %}
  {% trans "My Grades" %} - {% 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 %}
  {% if grade_participation.pk == participation.pk %}
    <h1>{% trans "My Grades" %}</h1>
  {% else %}
    <h1>{% trans "Grades" %}</h1>

    <table class="table table-condensed">
      <thead>
        <th>{% trans "Property" %}</th><th>{% trans "Value" %}</th>
      </thead>
      <tbody>
      <tr>
        <td>{% trans "User ID" %}</td>
        <td><span class="sensitive">{{ grade_participation.user.username }}</span></td>
      </tr>
      <tr>
        <td>{% trans "Name" context "real name of a user" %}</td>
        <td>
          <span class="sensitive">
          {# Translators: how the real name of a user is displayed. #}
          {% blocktrans trimmed with last_name=grade_participation.user.last_name first_name=grade_participation.user.first_name %}
                {{ last_name }}, {{ first_name }}
          {% endblocktrans %}
          </span>
        </td>
      </tr>
    </table>
  {% endif %}

  <table class="gradebook-single">
    <thead>
      <th>{% trans "Name of grading opportunity" %}</th>
      <th>{% trans "Grade" %}</th>
      <th>{% trans "Date" %}</th>
    </thead>
    <tbody>
      {% for grade_info in grade_table %}
      {% with grade_info.grade_state_machine as gsm %}
      <tr>
        <td data-order="{{ grade_info.opportunity.identifier }}">{{ grade_info.opportunity.name }}</td>
        <td data-order="{{ gsm.stringify_percentage }}">
          <a href="{% url "relate-view_single_grade" course.identifier grade_participation.id grade_info.opportunity.id %}"
           ><span class="sensitive">{{ gsm.stringify_state }}</span></a>
        </td>
        <td
         {% if  gsm.last_graded_time %}
             data-order="{{ gsm.last_graded_time.isoformat }}"
          {% else %}
             data-order=""
          {% endif %}
          >
          {{ grade_info.grade_state_machine.last_graded_time }}</a>
        </td>
      </tr>
      {% endwith %}
      {% endfor %}
    </tbody>
  </table>

  <script type="text/javascript">
    var tbl = $("table.gradebook-single").dataTable({
        "scrollCollapse": true,
        "paging": false,
    } );
  </script>

{% endblock %}