
<app-breadcrumb [path]="routes.MANAGEMENT"></app-breadcrumb>

<mat-card appearance="outlined" class="card">
  <mat-card-title class="card-title-wrapper">
    <p class="card-title">Products <span class="card-subtitle">{{(products$ | async).length}} total</span></p>

    <mat-form-field appearance="outline" class="search-field mat-form-field-should-float">
      <mat-label>Search</mat-label>
      <input matInput (keyup)="applyFilter($event)" #input class="search-title">
      <mat-icon matPrefix class="search-icon">search</mat-icon>
    </mat-form-field>
  </mat-card-title>


  <mat-card-content class="card-content">
    <button mat-flat-button color="success" [routerLink]="routes.PRODUCT_CREATE">create product</button>

    <div class="table-title-wrapper">
      <p class="table-title">Products</p>
      <mat-icon class="table-title-icon" matTooltip="Filter list" matTooltipPosition="above">filter_list</mat-icon>
    </div>

    <div class="table-wrapper">
      <table mat-table [dataSource]="dataSource" matSort class="table">

        <!-- Checkbox Column -->
        <ng-container matColumnDef="select">
          <th mat-header-cell *matHeaderCellDef>
            <mat-checkbox
              (change)="$event ? masterToggle() : null"
              [checked]="selection.hasValue() && isAllSelected()"
              [indeterminate]="selection.hasValue() && !isAllSelected()"
              [aria-label]="checkboxLabel()"
              color="warn"
            ></mat-checkbox>
          </th>
          <td mat-cell *matCellDef="let row">
            <mat-checkbox
              (click)="$event.stopPropagation()"
              (change)="$event ? selection.toggle(row) : null"
              [checked]="selection.isSelected(row)"
              [aria-label]="checkboxLabel(row)"
              color="warn"
            ></mat-checkbox>
          </td>
        </ng-container>

        <!-- Id Column -->
        <ng-container matColumnDef="id">
          <th mat-header-cell *matHeaderCellDef class="table-header product-id" mat-sort-header> ID </th>
          <td mat-cell *matCellDef="let element" class="table-body product-id"> {{element.id}} </td>
        </ng-container>

        <!-- Image Column -->
        <ng-container matColumnDef="image">
          <th mat-header-cell *matHeaderCellDef class="table-header"> Image </th>
          <td mat-cell *matCellDef="let element" class="table-body">
            <img class="image" src="{{element.imageSmall}}" alt="logo">
          </td>
        </ng-container>

        <!-- Title Column -->
        <ng-container matColumnDef="title">
          <th mat-header-cell *matHeaderCellDef class="table-header" mat-sort-header> Title </th>
          <td mat-cell *matCellDef="let element" class="table-body product-title" [routerLink]="[routes.PRODUCT, element.id]"> {{element.title}} </td>
        </ng-container>

        <!-- Subtitle Column -->
        <ng-container matColumnDef="subtitle">
          <th mat-header-cell *matHeaderCellDef class="table-header" mat-sort-header> Subtitle </th>
          <td mat-cell *matCellDef="let element" class="table-body"> {{element.subtitle}} </td>
        </ng-container>

        <!-- Price Column -->
        <ng-container matColumnDef="price">
          <th mat-header-cell *matHeaderCellDef class="table-header" mat-sort-header> Price </th>
          <td mat-cell *matCellDef="let element" class="table-body">{{element.price}}</td>
        </ng-container>

        <!-- Rating Column -->
        <ng-container matColumnDef="rating">
          <th mat-header-cell *matHeaderCellDef class="table-header" mat-sort-header> Rating </th>
          <td mat-cell *matCellDef="let element" class="table-body">
            <div class="rating-wrapper">
              <p class="product-pop">{{element.rating}}</p>
              <mat-icon color="accent" class="product-pop-icon">star</mat-icon>
            </div>
          </td>
        </ng-container>

        <!-- Action Column -->
        <ng-container matColumnDef="actions">
          <th mat-header-cell *matHeaderCellDef class="table-header"> Actions </th>
          <td mat-cell *matCellDef="let element" class="table-body">
            <div class="table-buttons-wrapper">
              <button mat-flat-button color="success" class="table-button" [routerLink]="[routes.PRODUCT_EDIT, element.id]">edit</button>
              <button mat-flat-button color="warn" class="table-button" (click)="openDeleteModal(element.id)">delete</button>
            </div>
          </td>
        </ng-container>

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

        <!-- Row shown when there is no matching data. -->
        <tr class="mat-row" *matNoDataRow>
          <td class="mat-cell" colspan="4">No data matching the filter "{{input.value}}"</td>
        </tr>
      </table>
    </div>

    <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
  </mat-card-content>
</mat-card>
