<ion-header>
    <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-header>
<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)">{{unEscape(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>


</ion-content>

<ion-footer>
    <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-footer>

<div class="loader" *ngIf="loader">
    <div class="lds-ripple">
        <div></div>
        <div></div>
    </div>
</div>