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

{% block page_content %}
<div class="container">
  <div class="row">
    <div class="col s12">
      <h1 id="title">{{ title }}</h1>
    </div>

    <div class="col s12 nopaque-ressource-list no-autoinit" data-ressource-type="User" id="users">
      <div class="card">
        <div class="card-content">
          <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>
            <thead>
              <tr>
                <th>Id</th>
                <th>Username</th>
                <th>Email</th>
                <th>Last seen</th>
                <th>Role</th>
                <th></th>
              </tr>
            </thead>
            <tbody class="list"></tbody>
          </table>
          <ul class="pagination"></ul>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock page_content %}

{% block scripts %}
{{ super() }}
<script>
  let userList = new UserList(document.querySelector('#users'));
  userList.init({{ dict_users|tojson }});
</script>
{% endblock scripts %}