<table class="table table-hover">
  <thead class="table-borderless">
  <tr class="text-center">
    <th>Photo</th>
    <th>User ID</th>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Username</th>
    <th>Email</th>
    <th>Status</th>
    <th>Actions</th>
  </tr>
  </thead>
  <tbody>
  <tr class="text-center" *ngFor="let user of users">
    <td (click)="onSelectUser(user)">
      <img height="40" width="40" src="{{user?.profileImageUrl}}"
           class="rounded-circle img-fluid img-thumbnail" alt=""/>
    </td>
    <td (click)="onSelectUser(user)">{{user.userId}}</td>
    <td (click)="onSelectUser(user)">{{user.firstName}}</td>
    <td (click)="onSelectUser(user)">{{user.lastName}}</td>
    <td (click)="onSelectUser(user)">{{user.username}}</td>
    <td (click)="onSelectUser(user)">{{user.email}}</td>
    <td (click)="onSelectUser(user)">
    <span class="badge" [ngClass]="{ 'bg-success': user?.active, 'bg-danger': !user?.active }">
      {{user?.active ? 'Active' : 'Inactive'}}
    </span>
    </td>
    <td class="">
      <div class="btn-group">
        <button class="btn btn-outline-info" (click)="onEditUser(user)"><i class="fas fa-edit"></i></button>
        <button *ngIf="isAdmin" class="btn btn-outline-danger" (click)="onDeleteUser(user)"><i
          class="fas fa-trash"></i>
        </button>
      </div>
    </td>
  </tr>

  </tbody>
</table>
