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

{% load i18n %}

{% load static %}

{% block title %}
  {% trans "List of Grading Opportunities" %} - {% 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 "List of Grading Opportunities" %}</h1>

  <table class="gradebook-opportunities">
    <thead>
      <th class="datacol">{% trans "Name of grading opportunity" %}</th>
      <th class="datacol">{% trans "Flow ID" %}</th>
      <th class="datacol">{% trans "Aggregation strategy" %}</th>
      <th class="datacol">{% trans "Due time" %}</th>
      <th class="datacol">{% trans "Shown to students" %}</th>
    </thead>
    <tbody>
      {% for opp in grading_opps %}
      <tr>
        <td class="datacol" data-order="{{ opp.identifier }}">
          <a href="{% url "relate-view_grades_by_opportunity" course.identifier opp.id %}">{{ opp.name }}</a>
          <span style="font-size:x-small">(<tt>{{ opp.identifier }}</tt>)</span>
        </td>
        <td class="datacol">
          {% if opp.flow_id %}
            <a href="{% url "relate-view_start_flow" course.identifier opp.flow_id %}">{{ opp.flow_id }}</a>
          {% endif %}
        </td>
        <td class="datacol">{{ opp.aggregation_strategy }}</td>
        <td class="datacol"
         {% if  opp.due_time != None %}
             data-order="{{ opp.due_time.isoformat }}"
          {% else %}
             data-order=""
          {% endif %}
          >{{ opp.due_time }}</td>
        <td class="datacol">
          {% if opp.shown_in_student_grade_book %}
            <i class="fa fa-check-square-o"></i>
          {% else %}
            <i class="fa fa-square-o"></i>
          {% endif %}
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>

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

{% endblock %}