<div class="fl-content fl-content-min-height">
  <app-fl-backdrop *ngIf="!users" overlayParent></app-fl-backdrop>
  <div *ngIf="users" layoutDirection="column">
    <table class="full-width" mat-table [dataSource]="users">
      <ng-container matColumnDef="email">
        <th mat-header-cell *matHeaderCellDef i18n>Email</th>
        <td mat-cell *matCellDef="let user" i18n [class.fl-bold]="user.id===currentUser.id">
          {{user.email}}<span *ngIf="user.id===currentUser.id"> (you)</span>
          <div class="user-invited-text" *ngIf="user.invitation">Invitation not yet accepted</div>
        </td>
      </ng-container>
      <ng-container matColumnDef="roles">
        <th mat-header-cell *matHeaderCellDef i18n>Roles</th>
        <td mat-cell *matCellDef="let user">
          <span *ngFor="let role of user.roles; let last=last">
            {{role.display_name}}<ng-container *ngIf="!last"> ,</ng-container>
          </span>
        </td>
      </ng-container>
      <ng-container matColumnDef="(actions)">
        <th mat-header-cell *matHeaderCellDef></th>
        <td mat-cell *matCellDef="let user">
          <app-object-actions [objectActions]="usersActions[user.id]" [maxVisibleActions]="3">
          </app-object-actions>
        </td>
      </ng-container>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    </table>
    <div layoutDirection="row" class="fl-margin-top">
      <button mat-button color="primary" (click)="inviteNewUser()" i18n>Invite user</button>
    </div>
  </div>
</div>
