<div class="d-grid gap-2 col-6 mx-auto mt-3">
  <button (click)="onInviteUser()" class="btn btn-primary" type="button">Invite user</button>
</div>
<div class="table-responsive mt-3">
  <table class="table table-striped table-bordered">
    <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Email</th>
      <th scope="col">Role</th>
      <th scope="col">Action</th>
    </tr>
    </thead>
    <tbody>
      @for (user of users | paginate: {itemsPerPage: 10, currentPage: page, id: 'userTable'}; track user.id) {
        <tr>
          <td>{{ user.playerName }}</td>
          <td>{{ user.email }}</td>
          <td>{{ user.role }}</td>
          <td>
            <div class="d-flex justify-content-around">
              <i ngbTooltip="Edit" placement="auto" (click)="onEditUser(user)"
                 class="bi custom-edit-icon bi-pencil-fill"></i>
              <i ngbTooltip="Delete" placement="auto" (click)="onDeleteUser(user)"
                 class="bi custom-delete-icon bi-trash3"></i>
            </div>
          </td>
        </tr>
      }
    </tbody>
  </table>
</div>
<pagination-controls (pageChange)="page = $event" [id]="'userTable'" [responsive]="true"
                     class="custom-pagination"></pagination-controls>
