<mat-card class="cardWithShadow">
    <mat-card-header class="p-t-24">
        <div class="d-flex align-items-center justify-content-between w-100">
            <mat-card-title>Top Paying Clients</mat-card-title>
            <button mat-icon-button color="inherit" aria-label="Example icon-button with a menu">
                <mat-icon class="f-s-24 d-flex align-items-center justify-content-center">more_vert</mat-icon>
            </button>
        </div>
    </mat-card-header>
    <mat-card-content class="p-t-0">
        <div class="table-responsive">
            <table mat-table [dataSource]="dataSource" class="w-100">
                <!-- Profile Column -->
                <ng-container matColumnDef="profile">
                    <th mat-header-cell *matHeaderCellDef class="f-w-600 mat-subtitle-1 f-s-16">
                        Profile
                    </th>
                    <td mat-cell *matCellDef="let element">
                        <div class="d-flex align-items-center">
                            <img [src]="element.imagePath" alt="users" width="50" class="rounded-circle" />
                            <div class="m-l-16">
                                <h6 class="mat-subtitle-1 text-truncate-2 f-s-14 f-w-600">
                                    {{ element.uname }}
                                </h6>
                                <span class="f-s-14">{{ element.position }}</span>
                            </div>
                        </div>
                    </td>
                </ng-container>

                <!-- Hour Rate Column -->
                <ng-container matColumnDef="hrate">
                    <th mat-header-cell *matHeaderCellDef class="f-w-600 mat-subtitle-1 f-s-16">
                        Hour Rate
                    </th>
                    <td mat-cell *matCellDef="let element" class="mat-body-1">
                        <span><span class="f-w-600 f-s-14">${{ element.hrate }}</span>/hour</span>
                    </td>
                </ng-container>

                <!-- Symbol Column -->
                <ng-container matColumnDef="skills">
                    <th mat-header-cell *matHeaderCellDef class="f-w-600 mat-subtitle-1 f-s-16">
                        Skills
                    </th>
                    <td mat-cell *matCellDef="let element">
                        <span class="f-s-14">{{ element.skills }}</span>
                    </td>
                </ng-container>

                <!-- Weight Column -->
                <ng-container matColumnDef="status">
                    <th mat-header-cell *matHeaderCellDef class="f-w-600 mat-subtitle-1 f-s-16">
                        Status
                    </th>
                    <td mat-cell *matCellDef="let element">
                        <span class="bg-light-{{ element.progress }} text-{{
                  element.progress
                }} border-{{ element.progress }} rounded f-w-600 p-6 p-y-4 f-s-12">
                            {{ element.priority | titlecase }}
                        </span>
                    </td>
                </ng-container>

                <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
                <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
            </table>
        </div>
    </mat-card-content>
</mat-card>