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

{% block page_content %}
<div class="col s12">
  <div id="user-list">
    <div class="card">
      <div class="card-content">
        <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="text"></input>
          <label for="search-user">Search user</label>
        </div>
        {{ table }}
        <ul class="pagination"></ul>
      </div>
    </div>
  </div>
</div>

<script>
  var options = {page: 10, pagination: true,
                 valueNames: ['username', 'email', 'role', 'confirmed', 'id']};
  var userList = new List('user-list', options);
</script>
{% endblock %}