<mat-card class="cardWithShadow">
  <mat-card-content>
    <div class="row justify-content-between">
      <div class="col-lg-4">
        <mat-form-field appearance="outline" class="w-100 hide-hint">
          <input
            matInput
            placeholder="Search User"
            (keyup)="applyFilter($any($event.target).value)"
          />
          <mat-icon matSuffix>
            <i-tabler name="search" class="icon-20"></i-tabler>
          </mat-icon>
        </mat-form-field>
      </div>
      <div class="col-lg-4 d-flex align-items-center justify-content-end">
        <button mat-flat-button (click)="openDialog('Add', {})" color="primary">
          Add User
        </button>
      </div>
    </div>
  </mat-card-content>
</mat-card>
<mat-card class="cardWithShadow">
  <mat-card-content>
    <div class="table-responsive">
      <table mat-table [dataSource]="dataSource" class="w-100">
        <ng-container matColumnDef="#">
          <th mat-header-cell *matHeaderCellDef class="f-s-16 f-w-600">#</th>
          <td mat-cell *matCellDef="let element">{{ element.id }}</td>
        </ng-container>

        <ng-container matColumnDef="name">
          <th mat-header-cell *matHeaderCellDef class="f-s-16 f-w-600">Name</th>
          <td mat-cell *matCellDef="let element">
            <div class="d-flex align-items-center">
              <img
                class="rounded-circle"
                [src]="element.imagePath"
                width="40"
              />
              <div class="m-l-16">
                <p class="f-w-600 f-s-16 m-b-4 m-t-0">
                  {{ element.Name }}
                </p>
                <small class="f-s-14">{{ element.Position }}</small>
              </div>
            </div>
          </td>
        </ng-container>

        <ng-container matColumnDef="email">
          <th mat-header-cell *matHeaderCellDef class="f-s-16 f-w-600">
            Email
          </th>
          <td mat-cell *matCellDef="let element" class="f-s-14">{{ element.Email }}</td>
        </ng-container>

        <ng-container matColumnDef="mobile">
          <th mat-header-cell *matHeaderCellDef class="f-s-16 f-w-600">
            Mobile
          </th>
          <td mat-cell *matCellDef="let element" class="f-s-14">
            {{ element.Mobile }}
          </td>
        </ng-container>

        <ng-container matColumnDef="date of joining">
          <th mat-header-cell *matHeaderCellDef class="f-s-16 f-w-600">
            Date of Joining
          </th>
          <td mat-cell *matCellDef="let element" class="f-s-14">
            {{ element.DateOfJoining | date : "fullDate" }}
          </td>
        </ng-container>

        <ng-container matColumnDef="salary">
          <th mat-header-cell *matHeaderCellDef class="f-s-16 f-w-600">
            Salary
          </th>
          <td mat-cell *matCellDef="let element" class="f-s-14">
            {{ element.Salary }}
          </td>
        </ng-container>

        <ng-container matColumnDef="projects">
          <th mat-header-cell *matHeaderCellDef class="f-s-16 f-w-600">
            Projects
          </th>
          <td mat-cell *matCellDef="let element" class="f-s-14">
            {{ element.Projects }}
          </td>
        </ng-container>

        <ng-container matColumnDef="action">
          <th mat-header-cell *matHeaderCellDef class="f-s-16 f-w-600">
            Action
          </th>
          <td mat-cell *matCellDef="let element" class="action-link">
            <a
              (click)="openDialog('Update', element)"
              class="m-r-10 cursor-pointer"
              ><i-tabler name="edit" class="icon-18"></i-tabler
            ></a>
            <a
              (click)="openDialog('Delete', element)"
              class="m-r-10 cursor-pointer"
            >
              <i-tabler name="trash" class="icon-18"></i-tabler>
            </a>
          </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
      </table>
      <mat-paginator
        [pageSizeOptions]="[5, 10, 20]"
        showFirstLastButtons
      ></mat-paginator>
    </div>
  </mat-card-content>
</mat-card>
