<div class="table-responsive">

  <table
    mat-table
    [dataSource]="usersList"
    class="w-100 borderless hoverable">

    <!-- Username column -->
    <ng-container matColumnDef="username">
      <th mat-header-cell *matHeaderCellDef>Username</th>
      <td mat-cell *matCellDef="let element">{{element.username}}</td>
    </ng-container>

    <!-- Name column -->
    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef>Name</th>
      <td mat-cell *matCellDef="let element">{{getExtra('name', element)}}</td>
    </ng-container>

    <!-- Email column -->
    <ng-container matColumnDef="email">
      <th mat-header-cell *matHeaderCellDef>Email</th>
      <td mat-cell *matCellDef="let element">{{getExtra('email', element)}}</td>
    </ng-container>

    <!-- Role column -->
    <ng-container matColumnDef="role">
      <th mat-header-cell *matHeaderCellDef>Roles</th>
      <td mat-cell *matCellDef="let element">{{element?.roles?.toString() ?? 'N/A'}}</td>
    </ng-container>

    <!-- Created column -->
    <ng-container matColumnDef="creationDate">
      <th mat-header-cell *matHeaderCellDef class="text-nowrap">Created</th>
      <td mat-cell *matCellDef="let element">{{element?.created | date:'dd.MM.YYYY'}}</td>
    </ng-container>

    <!-- Actions column -->
    <ng-container matColumnDef="actions">

      <th mat-header-cell *matHeaderCellDef class="px-3">Actions</th>

      <td mat-cell *matCellDef="let element">
        <div class="d-flex justify-content-between align-items-center">

          <button
            mat-icon-button
            [matMenuTriggerFor]="menu">
            <mat-icon>more_vert</mat-icon>
          </button>

        </div>

        <mat-menu #menu="matMenu">

          <button
            mat-menu-item
            (click)="editUser(element)">
            Edit
          </button>

          <button
            mat-menu-item
            (click)="changePassword(element)">
            Change password
          </button>

          <button
            mat-menu-item
            [disabled]="element.username === 'root'"
            (click)="deleteUser(element)">
            Delete
          </button>

        </mat-menu>
      </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>

    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

  </table>
</div>