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

{% load static %}

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

    <table class="table table-condensed">
      <thead>
        <th>Property</th><th>Value</th>
      </thead>
      <tbody>
      <tr>
        <td>Username</td>
        <td>{{ grade_participation.user.username }}</td>
      </tr>
      <tr>
        <td>Name</td>
        <td>
          {{ grade_participation.user.last_name }}, {{ grade_participation.user.first_name }}
        </td>
      </tr>
    </table>
  {% endif %}

  <table class="gradebook-single">
    <thead>
      <th>Name</th>
      <th>Grade</th>
      <th>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 "course.grades.view_single_grade" course.identifier grade_participation.id grade_info.opportunity.id %}"
            >{{ gsm.stringify_state }}</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 %}