{% load i18n %}

<table class="table table-striped gradebook-participants">
  <thead>
    <th class="datacol">{% trans "User ID" %}</th>
    {% if pperm.edit_participation %}
      <th class="datacol">{% trans "Actions" %}</th>
    {% endif %}
    <th class="datacol">{% trans "Status" %}</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 class="relate-participation-{{ participation.status }}">
      <td class="headcol"><a href="{% url "relate-view_participant_grades" course.identifier participation.id %}">
          <span class="sensitive">{{ participation.user.username }}</span>
        </a>
      </td>
      {% if pperm.edit_participation %}
        <td class="datacol">
          <a href="{% url "relate-edit_participation" course.identifier participation.id %}" class="btn btn-default btn-xs">{% trans "Edit" %}</a>
        </td>
      {% endif %}
      <td class="datacol">{% trans participation.status %}</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>