<div class="row">
    <div class="col-12">
        <div class="container mt-4 px-0">
            <div class="row justify-content-center">
                <div class="col-12 col-md-8">
                    <div class="row">
                        <div class=col-sm>
                            <div id="view.login.message" class="alert alert-danger">
                                <button id="view.login.message.button" type="button" class="btn-close" aria-label="Close"></button>
                                <span id="view.login.message.label"></span>
                            </div>
                        </div>
                    </div>
                </div>
                    <div class="row justify-content-center py-2">
                        <div class="col-sm">
                            <button id="btnadduser" class="btn btn-primary">Add User></button>
                        </div>
                    </div class="table-user-responsive">
                     <table class="table table-striped table-bordered" id="tblPhoneGrid">
                        <thead class="thead-dark">
                            <tr>
                                <th scope="col">UserID</th>
                                <th scope="col">Username</th>
                                <th scope="col">Password</th>
                                <th scope="col">Full Name</th>
                                <th scope="col">Status</th>
                                <th scope="col">Email Address</th>
                                <th scope="col">Access Type</th>
                                <th scope="col">System Rights</th>
                                <th scope="col">Perspective ID</th>
                                <th scope="col">QB ID</th>
                                <th scope="col">Edit</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- Rows will be added dynamically via Delphi code -->
                        </tbody>
                    </table>
                    <label id="lblentries"></label>

                    <nav aria-label="Page navigation">
                        <ul class="pagination justify-content-center" id="pagination">
                            <!-- Pagination items will be added dynamically via Delphi code -->
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>
<!--</div> -->
<!--</div>   -->
<div class="modal fade" id="confirmation_modal" tabindex="-1" aria-labelledby="confirmation_modal_label" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="confirmation_modal_label">Confirm</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Are you sure you want to make these changes?
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-primary" data-bs-dismiss="modal" id="btn_confirm_delete" >Confirm</button>
      </div>
    </div>
  </div>
</div>