<mat-card class="cardWithShadow">
  <mat-card-content>
    <mat-card-title>Table</mat-card-title>

    <div class="table-responsive">
      <table mat-table [dataSource]="dataSource1" class="w-100">
        <!-- Position Column -->
        <ng-container matColumnDef="assigned">
          <th
            mat-header-cell
            *matHeaderCellDef
            class="f-w-600 mat-subtitle-1 f-s-14 p-l-0"
          >
            Product
          </th>
          <td mat-cell *matCellDef="let element" class="p-l-0">
            <div class="d-flex align-items-center">
              <img
                [src]="element.imagePath"
                alt="users"
                width="60"
                class="rounded"
              />
              <div class="m-l-16">
                <h6 class="mat-subtitle-1 f-s-14 f-w-600">
                  {{ element.uname }}
                </h6>
              </div>
            </div>
          </td>
        </ng-container>

        <!-- Name Column -->
        <ng-container matColumnDef="name">
          <th
            mat-header-cell
            *matHeaderCellDef
            class="f-w-600 mat-subtitle-1 f-s-14"
          >
            Payment
          </th>
          <td mat-cell *matCellDef="let element" class="mat-body-1">
            @if(element.budget >= 160) {
            <h6 class="mat-body-1 f-s-16 m-b-4">
              <span class="text-dark f-w-600">${{ element.budget }} </span>/ 499
            </h6>
            <span class="f-s-14 f-w-500 d-block m-b-4">Full paid</span>
            <mat-progress-bar
              mode="determinate"
              value="40"
              color="primary"
            ></mat-progress-bar>
            } @else if(element.budget > 119) {
            <h6 class="mat-body-1 f-s-16 m-b-4">
              <span class="text-dark f-w-600">${{ element.budget }} </span>/ 499
            </h6>
            <span class="f-s-14 f-w-500 d-block m-b-4">Partially paid</span>
            <mat-progress-bar
              mode="determinate"
              value="40"
              color="accent"
            ></mat-progress-bar>
            } @else if(element.budget < 100) {
            <h6 class="mat-body-1 f-s-16 m-b-4">
              <span class="text-dark f-w-600">${{ element.budget }} </span>/ 499
            </h6>
            <span class="f-s-14 f-w-500 d-block m-b-4">Cancelled</span>
            <mat-progress-bar
              mode="determinate"
              value="40"
              color="warn"
            ></mat-progress-bar>
            }
          </td>
        </ng-container>

        <!-- Weight Column -->
        <ng-container matColumnDef="priority">
          <th
            mat-header-cell
            *matHeaderCellDef
            class="f-w-600 mat-subtitle-1 f-s-14"
          >
            Status
          </th>
          <td mat-cell *matCellDef="let element">
            @if(element.priority == 'cancelled') {
            <span
              class="bg-light-warning text-warning rounded f-w-600 p-6 p-y-4 f-s-12"
            >
              {{ element.priority | titlecase }}
            </span>
            } @if(element.priority == 'rejected') {
            <span
              class="bg-light-error text-error rounded f-w-600 p-6 p-y-4 f-s-12"
            >
              {{ element.priority | titlecase }}
            </span>
            } @if(element.priority == 'confirmed') {
            <span
              class="bg-light-success text-success rounded f-w-600 p-6 p-y-4 f-s-12"
            >
              {{ element.priority | titlecase }}
            </span>
            }
          </td>
        </ng-container>

        <!-- Symbol Column -->
        <ng-container matColumnDef="budget">
          <th
            mat-header-cell
            *matHeaderCellDef
            class="f-w-600 mat-subtitle-1 f-s-14"
          ></th>
          <td mat-cell *matCellDef="let element" class="mat-body-1">
            <button
              mat-icon-button
              [matMenuTriggerFor]="menu"
              aria-label="Example icon-button with a menu"
            >
              <mat-icon>more_vert</mat-icon>
            </button>
            <mat-menu #menu="matMenu">
              <button mat-menu-item>
                <mat-icon>add</mat-icon>
                <span>Add</span>
              </button>
              <button mat-menu-item>
                <mat-icon>edit</mat-icon>
                <span>Edit</span>
              </button>
              <button mat-menu-item>
                <mat-icon>delete</mat-icon>
                <span>Delete</span>
              </button>
            </mat-menu>
          </td>
        </ng-container>

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