{% extends "nopaque.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">
      <div class="card">
        <div class="card-content" id="users">
          <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>
          <ul class="pagination paginationTop"></ul>
          <table class="highlight responsive-table">
            <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="role_id">Role</th>
                <th>{# Actions #}</th>
              </tr>
            </thead>
            <tbody class="list"></tbody>
          </table>
          <ul class="pagination paginationBottom"></ul>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
{{ super() }}
<script type="module">
  import {RessourceList} from '{{ url_for('static', filename='js/nopaque.lists.js') }}';
  let userList = new RessourceList('users', null, "User", RessourceList.options.extended);
  userList._add({{ users|tojson }});
</script>
{% endblock scripts %}