<div class="purchase_wrapper">
    <div class="container-fluid">
        <app-searchbar>
        </app-searchbar>
        <div class="purchase_content_wrapper">
            <div class="purchase_content_section">
                <div class="search_list_header">
                    <h4>Latest Products</h4>
                </div>
                <div class="bottom_product_list"> 
                    <div class="loader_overlay" *ngIf="loader"></div>
                    <ngx-carousel [inputs]="carouselTile" (carouselLoad)="carouselTileLoad()" *ngIf="latestProductData">
                        <ngx-tile NgxCarouselItem *ngFor="let prdt of latestProductData">
                            <li  (click)="latestPrdtDtls(prdt.product_id)" >
                                <div class="inner_div_product cpoint">
                                    <div class="product_wrapper">
                                        <img src="{{imageServer + prdt.product_image}}" onerror="this.src='assets/images/user_avatar.jpg'">
                                    </div>
                                    <h5 class="text_truncate" data-toggle="pill" tooltip="{{prdt.product_name}}" placement="top" show-delay="500" z-index="99999">{{prdt.product_name}}</h5>
                                    <p>{{prdt.short_description}}</p>
                                    <div class="star_ratting">
                                        <fieldset class="rating prevent-click">
                                            <input type="radio" [checked]="(prdt.rating >= 4.75) ? 'true':''" [attr.id]="'usrStar_'+prdt.product_id+'_5'" [attr.name]="'usrStarName_'+prdt.product_id" value="5" /><label class = "full" for="secondStar5"></label>
                                            <input type="radio" [checked]="(prdt.rating >= 4.25 && prdt.rating < 4.75) ? 'true':''" [attr.id]="'usrStar_'+prdt.product_id+'_4half'" [attr.name]="'usrStarName_'+prdt.product_id" value="4.5" /><label class="half" for="secondStar4half"></label>
                                            <input type="radio" [checked]="(prdt.rating >= 3.75 && prdt.rating < 4.25) ? 'true':''" [attr.id]="'usrStar_'+prdt.product_id+'_4'" [attr.name]="'usrStarName_'+prdt.product_id" value="4" /><label class = "full" for="secondStar4"></label>
                                            <input type="radio" [checked]="(prdt.rating >= 3.25 && prdt.rating < 3.75) ? 'true':''" [attr.id]="'usrStar_'+prdt.product_id+'_3half'" [attr.name]="'usrStarName_'+prdt.product_id" value="3.5" /><label class="half" for="secondStar3half"></label>
                                            <input type="radio" [checked]="(prdt.rating >= 2.75 && prdt.rating < 3.25) ? 'true':''" [attr.id]="'usrStar_'+prdt.product_id+'_3'" [attr.name]="'usrStarName_'+prdt.product_id" value="3" /><label class = "full" for="secondStar3"></label>
                                            <input type="radio" [checked]="(prdt.rating >= 2.25 && prdt.rating < 2.75) ? 'true':''" [attr.id]="'usrStar_'+prdt.product_id+'_2half'" [attr.name]="'usrStarName_'+prdt.product_id" value="2.5" /><label class="half" for="secondStar2half"></label>
                                            <input type="radio" [checked]="(prdt.rating >= 1.75 && prdt.rating < 2.25) ? 'true':''" [attr.id]="'usrStar_'+prdt.product_id+'_2'" [attr.name]="'usrStarName_'+prdt.product_id" value="2" /><label class = "full" for="secondStar2"></label>
                                            <input type="radio" [checked]="(prdt.rating >= 1.25 && prdt.rating < 1.75) ? 'true':''" [attr.id]="'usrStar_'+prdt.product_id+'_1half'" [attr.name]="'usrStarName_'+prdt.product_id" value="1.5" /><label class="half" for="secondStar1half"></label>
                                            <input type="radio" [checked]="(prdt.rating >= 0.75 && prdt.rating < 1.25) ? 'true':''" [attr.id]="'usrStar_'+prdt.product_id+'_1'" [attr.name]="'usrStarName_'+prdt.product_id" value="1" /><label class = "full" for="secondStar1"></label>
                                            <input type="radio" [checked]="(prdt.rating < 0.75 && prdt.rating >= 0.25) ? 'true':''" [attr.id]="'usrStar_'+prdt.product_id+'_half'" [attr.name]="'usrStarName_'+prdt.product_id" value="0.5" /><label class="half" for="secondStarhalf"></label>
                                        </fieldset>
                                        <span class="floatRight">NGN {{prdt.amount}}</span>
                                        <div class="clear"></div>
                                        <p>{{(prdt.reviews > 0)?prdt.reviews+' Reviews':'Be the first one to review.'}}</p>
                                    </div>
                                </div>
                            </li>
                        </ngx-tile>
                        <button NgxCarouselPrev class='leftRs'>&lt;</button>
                        <button NgxCarouselNext class='rightRs'>&gt;</button>
                    </ngx-carousel>
                </div>
            </div>

            <div class="purchase_content_section">
                    <div class="search_list_header">
                        <h4>Trending Products</h4>
                    </div>
                <div class="search_listing_content">
                    <div class="loader_overlay" *ngIf="trend_loader"></div>
                    <ul *ngIf="trendingProductData" 
                        infiniteScroll  [infiniteScrollDistance]="2"  [infiniteScrollThrottle]="50"  (scrolled)="onScroll()" [scrollWindow]="false" style="max-height: 700px; overflow: scroll">
                        <li *ngFor="let prdt of trendingProductData" >
                            <div class="inner_div_product cpoint" (click)="latestPrdtDtls(prdt.product_id)" >
                                <div class="product_wrapper">
                                    <img src="{{imageServer + prdt.product_image}}" onerror="this.src='assets/images/user_avatar.jpg'">
                                </div>
                                <h5  class="text_truncate" data-toggle="pill" tooltip="{{prdt.product_name}}" placement="top" show-delay="500" z-index="99999">{{prdt.product_name}}</h5>
                                <p>{{prdt.short_description}}</p>
                                <div class="star_ratting">
                                    <fieldset class="rating prevent-click">
                                        <input type="radio" [checked]="(prdt.rating >= 4.75) ? 'true':''" [attr.id]="'usrReviewId_'+prdt.product_id+'_5'" [attr.name]="'usrReviewName_'+prdt.product_id" value="5" /><label class = "full" for="secondStar5"></label>
                                        <input type="radio" [checked]="(prdt.rating >= 4.25 && prdt.rating < 4.75) ? 'true':''" [attr.id]="'usrReviewId_'+prdt.product_id+'_4half'" [attr.name]="'usrReviewName_'+prdt.product_id" value="4.5" /><label class="half" for="secondStar4half"></label>
                                        <input type="radio" [checked]="(prdt.rating >= 3.75 && prdt.rating < 4.25) ? 'true':''" [attr.id]="'usrReviewId_'+prdt.product_id+'_4'" [attr.name]="'usrReviewName_'+prdt.product_id" value="4" /><label class = "full" for="secondStar4"></label>
                                        <input type="radio" [checked]="(prdt.rating >= 3.25 && prdt.rating < 3.75) ? 'true':''" [attr.id]="'usrReviewId_'+prdt.product_id+'_3half'" [attr.name]="'usrReviewName_'+prdt.product_id" value="3.5" /><label class="half" for="secondStar3half"></label>
                                        <input type="radio" [checked]="(prdt.rating >= 2.75 && prdt.rating < 3.25) ? 'true':''" [attr.id]="'usrReviewId_'+prdt.product_id+'_3'" [attr.name]="'usrReviewName_'+prdt.product_id" value="3" /><label class = "full" for="secondStar3"></label>
                                        <input type="radio" [checked]="(prdt.rating >= 2.25 && prdt.rating < 2.75) ? 'true':''" [attr.id]="'usrReviewId_'+prdt.product_id+'_2half'" [attr.name]="'usrReviewName_'+prdt.product_id" value="2.5" /><label class="half" for="secondStar2half"></label>
                                        <input type="radio" [checked]="(prdt.rating >= 1.75 && prdt.rating < 2.25) ? 'true':''" [attr.id]="'usrReviewId_'+prdt.product_id+'_2'" [attr.name]="'usrReviewName_'+prdt.product_id" value="2" /><label class = "full" for="secondStar2"></label>
                                        <input type="radio" [checked]="(prdt.rating >= 1.25 && prdt.rating < 1.75) ? 'true':''" [attr.id]="'usrReviewId_'+prdt.product_id+'_1half'" [attr.name]="'usrReviewName_'+prdt.product_id" value="1.5" /><label class="half" for="secondStar1half"></label>
                                        <input type="radio" [checked]="(prdt.rating >= 0.75 && prdt.rating < 1.25) ? 'true':''" [attr.id]="'usrReviewId_'+prdt.product_id+'_1'" [attr.name]="'usrReviewName_'+prdt.product_id" value="1" /><label class = "full" for="secondStar1"></label>
                                        <input type="radio" [checked]="(prdt.rating < 0.75 && prdt.rating >= 0.25) ? 'true':''" [attr.id]="'usrReviewId_'+prdt.product_id+'_half'" [attr.name]="'usrReviewName_'+prdt.product_id" value="0.5" /><label class="half" for="secondStarhalf"></label>
                                    </fieldset>
                                    <span class="floatRight">$ {{prdt.amount}}</span>
                                    <div class="clear"></div>
                                    <p>{{(prdt.reviews > 0)?prdt.reviews+' Reviews':'Be the first one to review.'}}</p>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <hr>
            </div>
            <div class="clear"></div>
        </div>
    </div>
</div>

<button #failureModel class="hide" data-toggle="modal" data-target="#failure"></button>

<div class="modal" id="failure">
    <div class="modal-dialog modal-sm">
        <div class="modal-content login_modal_wrapper status_modal">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
               
              </div>
            <div class="modal-body quote_modal">
                <div class="login_modal_content">
                    <div class="login_modal_inner">
                        <div class="login_success">
                            <img src="assets/images/asset_error.png">
                            <h4>Your Booking is failure</h4>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-12 textCenter">
                                <button class="btn log_btn btn-block" data-dismiss="modal">Close</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>