<div class="fl-content fl-content-min-height">
  <app-fl-backdrop *ngIf="!clients" overlayParent></app-fl-backdrop>
  <div *ngIf="clients" layoutDirection="column">
    <table class="full-width" mat-table [dataSource]="clients">
      <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef i18n>Name</th>
        <td class="position-relative" mat-cell *matCellDef="let client">
          <app-status-line [direction]="LineDirection.Vertical" [type]="client.appLineType"
                           [color]="client.appLineColor"></app-status-line>
          <a [routerLink]="config.getPanelUrl('clients-users/clients', client.id)">
            {{client.display || client.name}}
          </a>
        </td>
      </ng-container>
      <ng-container matColumnDef="roles">
        <th mat-header-cell *matHeaderCellDef i18n>Roles</th>
        <td mat-cell *matCellDef="let client">
          <span *ngFor="let role of client.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 client">
          <app-object-actions [objectActions]="clientActions[client.id]" [maxVisibleActions]="2">
          </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)="associateNewClient()" i18n>Associate client</button>
    </div>
  </div>
</div>
