WMGZON/templates/admin.html

<link rel="stylesheet" href="{{ url_for('static', filename='css/admin.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/loginform.css') }}" />
<link rel="stylesheet" href="{{ url_for('static', filename='css/modal.css') }}">

{% if users != None %}
    <p>Showing {{users|count}} users</p>
    <div class="user-container">
        <table class="table table-style">
            <thead>
              <tr>
                <th scope="col">#</th>
                <th scope="col">Username</th>
                <th scope="col">E-Mail</th>
                <th scope="col">Phone Number</th>
                <th scope="col">Role</th>
                <th>Actions</th>
              </tr>
            </thead>
            <tbody>
                {% for user in users %}
                    <tr>
                        <td>{{user.id}}</td>
                        <td>{{user.username}}</td>
                        <td>{{user.email}}</td>
                        <td>{{user.phone}}</td>
                        <td>{{user.role}}</td>
                        <td>
                            <div class="input-form-row">
                                <div class="button neutral">
                                    <p class="btnText">Edit User</p>
                                    <div class="btnTwo">
                                      <p class="btnText2">{{user.id}}</p>
                                    </div>
                                </div>
                                <label for="deleteModal{{user.id}}">
                                    <div class="button error">
                                        <p class="btnText">DELETE USER</p>
                                        <div class="btnTwo">
                                          <p class="btnText2">X</p>
                                        </div>
                                    </div>
                                </label>
                            </div>
                        </td>
                    </tr>

                    <!-- Modal -->
                    <input class="modal-state" id="deleteModal{{user.id}}" type="checkbox" />
                    <div class="modal">
                        <label class="modal__bg" for="deleteModal{{user.id}}"></label>
                        <div class="modal__inner">
                            <label class="modal__close" for="deleteModal{{user.id}}"></label>
                            <h2>Confirm Delete</h2>
                            <p>Are you sure you want to <b>delete</b> {{user.role}} <b>{{user.username}}</b></p>
                            <form method="POST" action="{{ url_for('main.users.delete', id=user.id) }}">
                                <div class="input-form-row">
                                    <input type="submit" class="modal-btn error" for="deleteModal{{user.id}}" value="Delete" />
                                </div>
                            </form>
                        </div>
                    </div>
                {% endfor %}
            </tbody>
        </table>
    </div>
{% else %}
    <p>Sorry... We have nothing to show here!</p>
{% endif %}