<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">
    </div>
    <button class="nav_btn nav_cart floatRight" (click)="goToPage('cart')">
        <div class="not">1</div>
  </button>
    <div class="clear"></div>
</div>
<ion-content>
    <div class="product_detail_wrapper" *ngIf="product">
        <div class="product_banner">
            <div class="fav_icon"></div>
            <div class="featured_badge" *ngIf="product.featured">Featured</div>
            <img [src]="product.image" onerror="this.src='../assets/model1@3x.jpg'">
        </div>
        <div class="product_header">
            <ion-row>
                <ion-col size="8">
                    <h3>{{product.prodName}}</h3>
                    <p><strong><span><img src="../assets/Path61_2.png"></span>0</strong>&nbsp; {{product.category}}, {{product.subCate}}
                        <br/>
                        <span *ngFor="let tag of product.tag">#{{tag}}</span>
                    </p>
                </ion-col>
                <ion-col size="4">
                    <h5>A$ {{product.price}}</h5>
                    <p><span class="offer" *ngIf="product.discount > 0">-{{product.discount}}%</span></p>
                </ion-col>
            </ion-row>
        </div>
        <div class="product_div_content">
            <h5>Size</h5>
            <div class="size_div">
                <ul *ngIf="product.size">
                    <ion-slides pager="false" [options]="slideOpts">
                        <ion-slide *ngFor="let size of product.size; let i = index">
                            <li>
                                <button id="custom_check_button">
                              <label>
                                <input id="{{size}}" type="radio" name="services" value="{{size}}" (click)="cartService.choose_size(size)" [checked]="i==0">
                                <p>{{size}}</p>
                              </label>
                            </button>
                            </li>
                        </ion-slide>
                    </ion-slides>
                </ul>
            </div>
            <h5>Description</h5>
            <p>{{product.prodDesc}}
            </p>
            <!--<h5>
                <span class="floatLeft">Reviews</span><span class="floatRight" (click)="goToPage('reviewlist')">MORE</span>
                <div class="clear"></div>
            </h5>
             <div class="review_list">
                <ul>
                    <li>
                        <div class="review_image">

                        </div>
                        <div class="review_detail">
                            <h4 class="floatLeft">John Doe<span><img src="../assets/Path61_2.png">4</span></h4>
                            <h4 class="floatRight review_date">July 26th 2019</h4>
                            <div class="clear"></div>
                            <p>
                                Thank you so much to Garrett & Stacey for helping us design our gorgeous dream kitchen.
                            </p>
                        </div>
                        <div class="clear"></div>
                    </li>
                    <li>
                        <div class="review_image">

                        </div>
                        <div class="review_detail">
                            <h4 class="floatLeft">John Doe<span><img src="../assets/Path61_2.png">4</span></h4>
                            <h4 class="floatRight review_date">July 26th 2019</h4>
                            <div class="clear"></div>
                            <p>
                                Thank you so much to Garrett & Stacey for helping us design our gorgeous dream kitchen.
                            </p>
                        </div>
                        <div class="clear"></div>
                    </li>
                    <li>
                        <div class="review_image">

                        </div>
                        <div class="review_detail">
                            <h4 class="floatLeft">John Doe<span><img src="../assets/Path61_2.png">4</span></h4>
                            <h4 class="floatRight review_date">July 26th 2019</h4>
                            <div class="clear"></div>
                            <p>
                                Thank you so much to Garrett & Stacey for helping us design our gorgeous dream kitchen.
                            </p>
                        </div>
                        <div class="clear"></div>
                    </li>
                    <li>
                        <div class="review_image">

                        </div>
                        <div class="review_detail">
                            <h4 class="floatLeft">John Doe<span><img src="../assets/Path61_2.png">4</span></h4>
                            <h4 class="floatRight review_date">July 26th 2019</h4>
                            <div class="clear"></div>
                            <p>
                                Thank you so much to Garrett & Stacey for helping us design our gorgeous dream kitchen.
                            </p>
                        </div>
                        <div class="clear"></div>
                    </li>
                </ul>
            </div> -->
            <h5 *ngIf="product.similar && product.similar.length > 0">
                <span class="floatLeft">Related Products</span><span class="floatRight" (click)="goToPage('productlist', data)">MORE</span>
                <div class="clear"></div>
            </h5>
            <div class="related_product_slider">
                <ul *ngIf="product.similar && product.similar.length > 0">
                    <ion-slides pager="false" [options]="relatedProd">
                        <ion-slide *ngFor="let similar of product.similar">
                            <li (click)="viewProd(similar)">
                                <div class="product_image">
                                    <img [src]="similar.image" onerror="this.src='../assets/model1@3x.png'">
                                    <div class="fav_icon">
                                    </div>
                                </div>
                                <h5>{{similar.prodName}}</h5>
                                <p>{{similar.price}}</p>
                            </li>
                        </ion-slide>
                    </ion-slides>
                </ul>
            </div>
        </div>
    </div>

</ion-content>
<ion-footer>
    <div class="footer_div">
        <div class="footer_options">
            <button class="share"></button>
            <button class="fav"></button>
            <button class="cart" (click)="buyNow(product,0)"></button>
        </div>
        <div class="footer_btn" (click)="buyNow(product,1)">BUY NOW</div>
    </div>
</ion-footer>