db-lab1/templates/users.html

121 lines
4.4 KiB
HTML
Raw Permalink Normal View History

{% extends "base.html" %}
{% block title %}Users{% endblock %}
{% block users_active %}active{% endblock %}
{% block content %}
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#userModal">
Add User
</button>
<!-- Modal -->
<div class="modal fade" id="userModal" tabindex="-1" aria-labelledby="userModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<form method="post" action="/form_add_user">
<div class="modal-header">
<h5 class="modal-title" id="userModalLabel">Add User</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="mb-3">
<label for="username" class="form-label">Username</label>
<input type="text" class="form-control" id="username" name="username" placeholder="Username">
</div>
<div class="mb-3">
<label for="first_name" class="form-label">First Name</label>
<input type="text" class="form-control" id="first_name" name="first_name" placeholder="First Name">
</div>
<div class="mb-3">
<label for="last_name" class="form-label">Last Name</label>
<input type="text" class="form-control" id="last_name" name="last_name" placeholder="Last Name">
</div>
<div class="mb-3">
<label for="email" class="form-label">Email address</label>
<input type="email" class="form-control" id="email" name="email" placeholder="name@example.com">
</div>
<div class="mb-3">
<label for="password" class="form-label">Password</label>
<input type="password" class="form-control" id="password" name="password">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary">Add</button>
</div>
</form>
</div>
</div>
</div>
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Username</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Email</th>
</tr>
</thead>
<tbody>
{% for user in users %}
<tr style="vertical-align: middle;">
<th scope="row">{{ loop.index1 }}</th>
<td>{{ user.username }}</td>
<td>{{ user.first_name }}</td>
<td>{{ user.last_name }}</td>
<td>{{ user.email }}</td>
</tr>
{% endfor %}
</tbody>
</table>
{% if exists("pagination") %}
<ul class="pagination">
{% if existsIn(pagination, "previous") %}
<li class="page-item">
<a class="page-link" href="/users/{{ pagination.previous }}" aria-label="Previous">
<span aria-hidden="true">&laquo;</span>
</a>
</li>
{% else %}
<li class="page-item disabled">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true">&laquo;</span>
</a>
</li>
{% endif %}
{% if existsIn(pagination, "left_ellipsis") %}
<li class="page-item"><a class="page-link" href="/users/1">1</a></li>
<li class="page-item disabled"><a class="page-link" href="#">...</a></li>
{% endif %}
{% for page in pagination.pages_left %}
<li class="page-item"><a class="page-link" href="/users/{{ page }}">{{ page }}</a></li>
{% endfor %}
<li class="page-item active" aria-current="page"><a class="page-link" href="/users/{{ pagination.current }}">{{ pagination.current }}</a></li>
{% for page in pagination.pages_right %}
<li class="page-item"><a class="page-link" href="/users/{{ page }}">{{ page }}</a></li>
{% endfor %}
{% if existsIn(pagination, "right_ellipsis") %}
<li class="page-item disabled"><a class="page-link" href="#">...</a></li>
<li class="page-item"><a class="page-link" href="/users/{{ pagination.total }}">{{ pagination.total }}</a></li>
{% endif %}
{% if existsIn(pagination, "next") %}
<li class="page-item">
<a class="page-link" href="/users/{{ pagination.next }}" aria-label="Next">
<span aria-hidden="true">&raquo;</span>
</a>
</li>
{% else %}
<li class="page-item disabled">
<a class="page-link" href="#" aria-label="Next">
<span aria-hidden="true">&raquo;</span>
</a>
</li>
{% endif %}
</ul>
{% endif %}
{% endblock %}