<div class="fl-content fl-content-min-height">
  <app-fl-backdrop *ngIf="!userGroups" overlayParent></app-fl-backdrop>
  <div *ngIf="userGroups && !userGroups.length" class="fl-heading-md fl-gray-color" i18n>No user groups</div>
  <div *ngIf="userGroups && userGroups.length" layoutDirection="column">
    <table class="full-width" mat-table [dataSource]="userGroups">
      <ng-container matColumnDef="id">
        <th mat-header-cell *matHeaderCellDef i18n>ID</th>
        <td mat-cell *matCellDef="let userGroup">
          <a [routerLink]="[config.getPanelUrl('clients-users/user-groups'), userGroup.id]">
            {{userGroup.id}}
          </a>
        </td>
      </ng-container>
      <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef i18n>Name</th>
        <td mat-cell *matCellDef="let userGroup">
          <a [routerLink]="[config.getPanelUrl('clients-users/user-groups'), userGroup.id]">
            {{userGroup.name}}
          </a>
        </td>
      </ng-container>
      <ng-container matColumnDef="(actions)">
        <th mat-header-cell *matHeaderCellDef></th>
        <td mat-cell *matCellDef="let userGroup">
          <div class="fl-margin-right">
            <app-object-actions [objectActions]="userGroupActions[userGroup.id]" [maxVisibleActions]="2">
            </app-object-actions>
          </div>
        </td>
      </ng-container>
      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>
  </div>
  <button mat-button color="primary" class="fl-margin-top" (click)="addToGroup()" i18n>
    Add user to group
  </button>
</div>
