<div class="m-333">
  <!-- <span fxFlex></span> -->
  <button mat-raised-button class="mb-8" color="primary" (click)="openPopUp({}, true)">{{"ADD" | translate }} {{"MEMBER" | translate }}</button>
</div>
<mat-card class="p-0" [@animate]="{value:'*',params:{y:'50px',delay:'300ms'}}">
  <mat-card-content class="p-0">
    <ngx-datatable
          class="material ml-0 mr-0"
          [rows]="items"
          [columnMode]="'force'"
          [headerHeight]="50"
          [footerHeight]="50"
          [scrollbarH]="true"
          [limit]="10"
          [rowHeight]="50">
          <ngx-datatable-column name="Name" [flexGrow]="1">
            <ng-template let-row="row" ngx-datatable-cell-template>
              {{ row?.name }}
            </ng-template>
          </ngx-datatable-column>
          <ngx-datatable-column name="Age" [flexGrow]="1">
            <ng-template let-row="row" ngx-datatable-cell-template>
              {{ row?.age }}
            </ng-template>
          </ngx-datatable-column>
          <ngx-datatable-column name="Balance" [flexGrow]="1">
            <ng-template let-row="row" ngx-datatable-cell-template>
              {{ row?.balance | currency }}
            </ng-template>
          </ngx-datatable-column>
          <ngx-datatable-column name="Company" [flexGrow]="1">
            <ng-template let-row="row" ngx-datatable-cell-template>
              {{ row?.company }}
            </ng-template>
          </ngx-datatable-column>
          <ngx-datatable-column name="Status" [flexGrow]="1">
            <ng-template let-row="row" ngx-datatable-cell-template>
              <mat-chip mat-sm-chip [color]="'primary'" [selected]="row.isActive">{{row.isActive ? 'active' : 'inactive'}}</mat-chip>
            </ng-template>
          </ngx-datatable-column>
          <ngx-datatable-column name="Actions" [flexGrow]="1">
            <ng-template let-row="row" ngx-datatable-cell-template>
              <button mat-icon-button mat-sm-button color="primary" class="mr-16" (click)="openPopUp(row)"><mat-icon>edit</mat-icon></button>
              <button mat-icon-button mat-sm-button color="warn" (click)="deleteItem(row)"><mat-icon>delete</mat-icon></button>
            </ng-template>
          </ngx-datatable-column>
        </ngx-datatable>
  </mat-card-content>
</mat-card>
