{% extends 'web_template/index.html' %}
{% load i18n %}
{% load static %}
{% block stylesheets %}
{{ block.super }}
<link rel="stylesheet" type="text/css" href="{% static  'datatables/media/css/dataTables.bootstrap.min.css' %}">
{% endblock %}
{% block page_name %}
{% trans "List of students (and staff members)" %}
{% endblock %}
{% block page_description %}
<a href='{% url 'studentupload' %}' class="btn btn-default"><i class="fa fa-plus-circle"></i> {% trans "Upload students" %}</a>
{% endblock %}
{%block content %}

 <div class="box">
            <div class="box-header">
              <h3 class="box-title">Exams</h3>
            </div>
            <!-- /.box-header -->
            <div class="box-body">
              <table id="user_list" class="table table-bordered table-hover">
                <thead>
                <tr>
                  <th>{% trans "Name" %}</th>
                  <th>{% trans "Student id/Username" %}</th>
                  <th>{% trans "Email" %}</th>
		  <th>{%trans "Action" %}</th>
                </tr>
                </thead>
                <tbody>
		{% for student in user_list %}
                <tr>
                  <td>{{ student.last_name }} {{ student.first_name }}</td>
                  <td>{{ student.username }}</td>
                  <td>{{ student.email }}</td>
		  <td>
			no actions
		  </td>
                </tr>
		{% endfor %}
		<tfoot>
                <tr>
                  <th>{% trans "Name" %}</th>
                  <th>{% trans "Student id/Username" %}</th>
                  <th>{% trans "Email" %}</th>
		  <th>{%trans "Action" %}</th>
                </tr>
                </tfoot>
              </table>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->


{% endblock %}

{% block extra_foot %}
{{ block.super}}
<script src='{% static  'datatables/media/js/jquery.dataTables.min.js' %}'></script>
<script src='{% static  'datatables/media/js/dataTables.bootstrap.min.js' %}'></script>
<script>
  $(function () {
    $('#user_list').DataTable()
});
</script>
{% endblock %}