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

{% block nav_content %}
{% include 'admin/_breadcrumbs.html.j2' %}
{% endblock nav_content %}

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

    <div class="col s12" 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 class="highlight ressource-list">
            <thead>
              <tr>
                <th class="sort" data-sort="id">Id</th>
                <th class="sort" data-sort="username">Username</th>
                <th class="sort" data-sort="email">Email</th>
                <th class="sort" data-sort="last_seen">Last seen</th>
                <th class="sort" data-sort="role">Role</th>
                <th></th>
              </tr>
            </thead>
            <tbody class="list"></tbody>
          </table>
          <ul class="pagination"></ul>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}

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