{% load i18n %}

<table class="table table-striped gradebook-participants">
  <thead>
    <th class="datacol">{% trans "User ID" %}</th>
    <th class="datacol">{% trans "Name" context "real name of a user" %}</th>
    <th class="datacol">{% trans "Role" %}</th>
    <th class="datacol">{% trans "Institutional ID" %}</th>
    <th class="datacol">{% trans "Tags" %}</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.get_full_name }}</span></td>
      <td class="datacol">{{ participation.get_role_desc }}</td>
      <td class="datacol"><span class="sensitive">{{ participation.user.institutional_id }}</span></td>
      <td class="datacol">
        {% for ptag in participation.tags.all %}
          <span class="label label-default">{{ ptag.name }}</span>
        {% endfor %}
      </td>
    </tr>
    {% endfor %}
  </tbody>
</table>

{% load static coursetags %}
{% get_current_js_lang_name as LANG %}
<script type="text/javascript">
  var tbl = $("table.gradebook-participants").dataTable({
      "scrollCollapse": true,
      "paging": false,
      "ordering": true,
      "columnDefs": [{ type: 'name', targets: 1 }],
      "language": {url: '{% static "datatables-i18n/i18n/" %}{{LANG}}.json'},
  } );
</script>