{% extends "layouts/default.html" %}
{% block title %}{_ "User Admin Panel" _}{% endblock %}
{% block content %}

{% include "user/user-menu-bar.html" %}

<div class="content" id="user-list">
  <div class="table-container">
    <table class="table is-bordered is-striped is-narrow is-hoverable is-fullwidth">
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Email</th>
          <th>Roles</th>
          <th>Delete</th>
        </tr>
      </thead>
      <tbody>
        {% for user in user-list %}
        <tr>
          <td>{{ user.id }}</td>
          <td>{{ user.name }}</td>
          <td>{{ user.email }}</td>
          <td><div hx-get="/user/{{ user.id }}/roles"
                   hx-trigger="load"
                   hx-swap="innerHTML"></div>
          </td>
          <td>
            <form>
              {{ token | safe }}
              <a class="button is-danger"
                 form="admin-form"
                 hx-confirm="Delete user {{ user.id }}?"
                 hx-post="/user/{{ user.id }}/delete"
                 hx-swap="outerHTML swap:1s"
                 hx-target="closest tr">
                <i class="fas fa-trash"></i>
              </a>
            </form>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% endblock %}