Add user_list page with datatable of users

Author: tdunn891

accounts/templates/user_list.html

@@ -1,28 +1,50 @@
 {% extends 'base.html' %}
 {% block title %}User List{% endblock %}
-{% block page_heading %}
-<h2>User List</h2>
-<hr>
+{% block page_heading %}<i class="material-icons">people</i> User List{% endblock %}
+{% block head %}
+<!-- <link rel="stylesheet" href="//cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css"> -->
+<link rel="stylesheet" type="text/css"
+   href="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.20/b-1.6.1/b-html5-1.6.1/cr-1.5.2/r-2.2.3/sp-1.0.1/sl-1.3.1/datatables.min.css" />
 {% endblock %}
 {% block content %}
-<table class="table table-sm">
-   <thead>
-      <tr>
-         <th scope="col">ID</th>
-         <th scope="col">User</th>
-         <th scope="col">Role</th>
-         <th scope="col">Email</th>
-      </tr>
-   </thead>
-   <tbody>
-      {% for user in users %}
-      <tr>
-         <td scope="row">{{ user.id }}</td>
-         <td>{{ user.username }}</td>
-         <td>placeholder</td>
-         <td>{{ user.email }}</td>
-      </tr>
-      {% endfor %}
-   </tbody>
-</table>
+<div class="row">
+   <div class="col col-12">
+      <table id="user-table" class="table display">
+         <thead>
+            <tr>
+               <th>ID</th>
+               <th>User</th>
+               <th>First Name</th>
+               <th>Last Name</th>
+               <th>Role</th>
+               <th>SuperUser</th>
+               <th>Email</th>
+            </tr>
+         </thead>
+         <tbody>
+            {% for user in users %}
+            <tr>
+               <td>{{ user.id }}</td>
+               <td>{{ user.username }}</td>
+               <td>{{ user.first_name }}</td>
+               <td>{{ user.last_name }}</td>
+               <td>placeholder</td>
+               <td>{{ user.is_superuser }}</td>
+               <td>{{ user.email }}</td>
+            </tr>
+            {% endfor %}
+         </tbody>
+      </table>
+   </div>
+</div>
+{% endblock %}
+{% block scripts %}
+<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
+<script type="text/javascript"
+   src="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.20/b-1.6.1/b-html5-1.6.1/cr-1.5.2/r-2.2.3/sp-1.0.1/sl-1.3.1/datatables.min.js"></script>
+<script>
+   $(document).ready(() => {
+      $('#user-table').DataTable();
+   });
+</script>
 {% endblock %}