<section class="order-list">
  <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
    <ng-container matColumnDef="order">
      <th mat-header-cell *matHeaderCellDef>Order</th>
      <td mat-cell *matCellDef="let element">{{ element.order }}</td>
    </ng-container>

    <ng-container matColumnDef="date">
      <th mat-header-cell *matHeaderCellDef>Date</th>
      <td mat-cell *matCellDef="let element">{{ element.date }}</td>
    </ng-container>

    <ng-container matColumnDef="status">
      <th mat-header-cell *matHeaderCellDef>Status</th>
      <td mat-cell *matCellDef="let element">
        <span
          class="bold"
          [ngClass]="{
            active: element.status === 'Aproved',
            pending: element.status === 'Pending',
            rejected: element.status === 'Rjected'
          }"
          >{{ element.status }}</span
        >
      </td>
    </ng-container>

    <ng-container matColumnDef="actions">
      <th mat-header-cell *matHeaderCellDef></th>
      <td mat-cell *matCellDef="let element" class="column-flex">
        <button class="btn" (click)="onOpenDetail()">View Detail</button>
      </td>
    </ng-container>

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