{% 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 class="highlight responsive-table">
        <thead>
          <tr>
            <th class="sort" data-sort="username">Username</th>
            <th class="sort" data-sort="email">Email</th>
            <th class="sort" data-sort="role_id">Role</th>
            <th class="sort" data-sort="confirmed">Confirmed Status</th>
            <th class="sort" data-sort="id">Id</th>
            <th>{# Actions #}</th>
          </tr>
        </thead>
        <tbody class="list">
        </tbody>
      </table>
      <ul class="pagination paginationBottom"></ul>
    </div>
  </div>
</div>

<script>
  var ressources = {{ users|tojson|safe }};
  var userList = new RessourceList('users', null, "User");
  userList.addRessources(ressources);
  RessourceList.modifyTooltips();
</script>
{% endblock %}