<div class="nav_header">
  <button class="nav_btn nav_back floatLeft" (click)="goBack()">
    <img src="../assets/Group17_2.png" />
  </button>
  <div class="nav_title floatLeft">
    <h4>WISHLIST</h4>
  </div>
  <div class="clear"></div>
</div>

<ion-content>
  <div class="wishlist-wrapper">
    <ul *ngIf="wishService.whishItem && wishService.whishItem.length > 0">
      <li *ngFor="let product of wishService.whishItem; let i = index">
        <div class="wishlist_image" (click)="prodDetails(i)">
          <img
            [src]="product.image"
            onerror="this.src='../../assets/img-list.png'"
          />
        </div>
        <div class="wishlist_detail">
          <p class="floatLeft" (click)="prodDetails(i)">{{product.prodName}}</p>
          <span class="floatRight"
            ><img
              src="../../assets/heart.png"
              (click)="removeItem(product.prodId)"
          /></span>
          <div class="clear"></div>
          <p (click)="prodDetails(i)">
            <span *ngIf="product.color[0] !=='No-Color'"
              >{{product.color[0]}}</span
            >,
            <span *ngIf="product.size[0] !=='Any-Size'"
              >{{product.size[0]}}</span
            >
          </p>
          <h1 (click)="prodDetails(i)">A$ {{product.price}}</h1>
        </div>
        <div class="clear"></div>
      </li>
    </ul>
  </div>
  <div class="empty-wishlist-wrapper" *ngIf="wishService.whishItem.length == 0">
    <img src="../../assets/wishlist.png" />
    <h1>There is no products added</h1>
    <button (click)="goToPage('home')">shop now</button>
  </div>

  <div class="footer-btns-wrapper" *ngIf="wishService.whishItem.length > 0">
    <button class="btn-clear" (click)="clearAll()">Clear All</button>
    <button class="btn-cart" (click)="addToCart()">add all to cart</button>
  </div>
</ion-content>
<div class="loader" *ngIf="loader">
  <div class="lds-ripple">
    <div></div>
    <div></div>
  </div>
</div>
