<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="user">
        <th mat-header-cell *matHeaderCellDef i18n>User</th>
        <td class="position-relative" mat-cell *matCellDef="let user">
          <app-status-line [direction]="LineDirection.Vertical" [type]="LineType.Solid"
                           [color]="user.statusValue | lineColor"></app-status-line>
          <a *ngIf="!user.invitation; else invitation"
             [routerLink]="config.getPanelUrl('clients-users/users/' + user.id.toString())">
            {{user.display}}
          </a>
          <ng-template #invitation>
            {{user.display}}
            <div class="user-invited-text" *ngIf="user.invitation" i18n>Invitation not yet accepted</div>
          </ng-template>
        </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)="associateNewUser()" i18n>Associate user</button>
    </div>
  </div>
</div>
