<div class="wishlist-wrapper">
<div class="header-title" style="background: url(assets/images/background/header.jpg);">
    <div class="container" id="mainDIV" >
    <div class="title">
        <h2>Wishlist</h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <br>Aenean commodo ligula eget dolor</p>
      </div>
</div>
</div>
<div class="wishlist" style="background: url(assets/images/background/download.svg);">
    <div class="container">
        <div class="cart-wrapper sec-padding">


      <div fxLayout="column" fxLayoutAlign="space-around center" *ngIf="!wishlistItems.length">
        <mat-chip-list>
            <mat-chip color="warn" selected="true">YOU HAVE NO ITEMS IN YOUR WISHLIST.</mat-chip>
        </mat-chip-list>
        <div>
          <a [routerLink]="['/home/one']" routerLinkActive="router-link-active"   mat-raised-button color="primary" class="btn-project mt-20">Continue shopping</a>
        </div>

      </div>

      <mat-card *ngIf="wishlistItems.length"  class="p-0">

        <div class="mat-table cart-table">
          <div class="mat-header-row">
            <div class="mat-header-cell">Product</div>
            <div class="mat-header-cell">Name</div>
            <div class="mat-header-cell">Price</div>
            <div class="mat-header-cell text-center">
              <div class="px-1">
                <button mat-raised-button color="warn" >Clear All</button>
              </div>
            </div>
          </div>
          <div *ngFor="let item of wishlistItems"  class="mat-row">
            <div class="mat-cell"><img [src]="item.pictures"></div>
            <div class="mat-cell"><a [routerLink]="['/home/product', item.id]"  class="product-name">{{item.name}}</a></div>
            <div class="mat-cell price">{{item.price | number : '1.2-2'}}</div>

            <div class="mat-cell text-center">
              <div class="p-1">
                    <mat-icon class="close" (click)="removeItem(item)">close</mat-icon>
              </div>
            </div>

          </div>
          <div class="mat-row">
            <div class="mat-cell"><a [routerLink]="['/home/one']"  mat-raised-button  class="btn-project">Continue shopping</a></div>
            <div class="mat-cell"></div>
            <div class="mat-cell"></div>


            <div class="mat-cell text-center"><a mat-raised-button  class="btn-project">Proceed To Checkout</a></div>
          </div>
        </div>

      </mat-card>
      </div>
      </div>
</div>

</div>