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

{% load static %}

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

  <table class="gradebook-participants">
    <thead>
      <th class="datacol">{% trans "User ID" %}</th>
      <th class="datacol">{% trans "Last Name" %}</th>
      <th class="datacol">{% trans "First Name" %}</th>
      <th class="datacol">{% trans "Role" %}</th>
    </thead>
    <tbody>
      {% for participation in participations %}
      <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">{{ participation.user.last_name }}</span></td>
        <td class="datacol"><span class="sensitive">{{ participation.user.first_name }}</span></td>
        <td class="datacol">{{ participation.get_role_desc }}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>

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

{% endblock %}