{% extends "nopaque.html.j2" %}

{% set full_width = True %}

{% block page_content %}
<div class="col s12">
  <div class="card">
    <div class="card-content" id="users">
      <span class="card-title">User list</span>
      <div class="input-field">
        <i class="material-icons prefix">search</i>
        <input id="search-user" class="search" type="search"></input>
        <label for="search-user">Search user</label>
      </div>
      <ul class="pagination paginationTop"></ul>
      {{ table }}
      <ul class="pagination paginationBottom"></ul>
    </div>
  </div>
</div>

<script>
  var options = {page: 10,
                 pagination: [{name: "paginationTop",
                               paginationClass: "paginationTop",},
                              {paginationClass: "paginationBottom"}],
                 valueNames: ['username', 'email', 'role', 'confirmed', 'id']};
  var userList = new List('users', options);
</script>
{% endblock %}