<div class="purchase_wrapper">
    <div class="container-fluid">
        <app-searchbar>
        </app-searchbar>
        <div class="purchase_content_wrapper">
            <div class="purchase_filter_section">
                <h5>FILTERS</h5>
                <div *ngIf="productBrand && productBrand.length > 0">
                    <h6 href="#ac1" data-toggle="collapse">Brands</h6>
                    <ul id="ac1" class="collapse in show" malihu-scrollbar [scrollbarOptions]="scrollbarOptions" style="height:150px;">
                        <li class="relative" *ngFor="let brands of productBrand; let i=index">
                            <div class="custom_checkbox_filter">
                                <input class="custom_checkbox" id="custom_checkbox_{{i}}" (click) ="selectBrand($event,brands.brand_id)" type="checkbox" value="value1">
                                <label for="custom_checkbox_{{i}}">{{brands.brand_name}}</label>
                            </div>
                        </li>
                    </ul>
                </div>
                <h6 href="#ac2" data-toggle="collapse">Price</h6>
                <ul id="ac2" class="collapse in show">
                    <li>
                        <ng5-slider #slider [(value)]="sliderMinvalue" [(highValue)]="sliderhighValue" [options]="slideroptions" (userChangeEnd)="getPrice(slider.value,slider.highValue)"></ng5-slider>
                        <span class="floatLeft">Min</span>
                        <span class="floatRight">Max</span>
                        <div class="clear"></div>
                    </li>
                </ul>
                <h6 href="#ac3" data-toggle="collapse">Vehicle Information</h6>
                <ul id="ac3" class="collapse in show">
                        <h6 class="backgroundNone borderNone">
                            <select (change)="get_year($event.target.value)" [ngClass]="{'input_error': errorYear}">
                                <option [value]="0" [disabled]="true">Select Year</option>
                                <option *ngFor="let date of modelDates" [selected]="date == carFilter['year']">{{date}}</option>
                            </select>
                        </h6>
                        <h6 class="backgroundNone borderNone">
                            <select (change)="get_model($event.target.value)">
                                <option [value]="0" [selected]="true" [disabled]="true">Select Maker</option>
                                <option *ngFor="let brands of carBrands" [selected]="brands.veh_brand_id == carFilter['make']" value="{{brands.veh_brand_id}}">
                                   {{brands.maker}}
                                </option>
                            </select>
                        </h6>
                        <h6 class="backgroundNone borderNone">
                            <select (change)="getModelResult($event.target.value)" *ngIf="modelShow && carModel && carModel.length > 0">
                                <option [value]="0" [selected]="!carFilter['model']?true:false" [disabled]="true">Select Model</option>
                                <option *ngFor="let models of carModel" [selected]="models.veh_model_id == carFilter['model']" value="{{models.veh_model_id}}">
                                    {{models.model}}
                                </option>
                            </select>
                        </h6>
                        <h6 class="backgroundNone borderNone">
                            <select  (change)="getTrimData($event.target.value)" *ngIf="carTrim && carTrim.length > 0">
                                <option value="" class="hide">TRIM</option>
                                <option *ngFor="let car_trim of carTrim" [selected]="car_trim.trim == carFilter['trim']" value="{{car_trim.trim}}">{{car_trim.trim}}</option>
                            </select>
                        </h6>
                </ul>
            </div>
            <div class="purchase_content_section">
                <div class="search_list_header">
                    <div class="row">
                        <div class="col-md-8">
                            <p>Search Results</p>
                        </div>
                        <!-- <div class="col-md-4">
                            <select class="floatRight">
                                <option>Select by popularity</option>
                                <option>Select by price</option>
                            </select>
                            <div class="clear"></div>
                        </div> -->
                    </div>
                </div>
                <div class="loader_overlay" *ngIf="loader"></div>
                <div class="search_listing_content cpoint" *ngIf="productArray && productArray.length > 0;else noProductData">
                    <ul infiniteScroll  [infiniteScrollDistance]="2"  [infiniteScrollThrottle]="50"  (scrolled)="onScroll()" [scrollWindow]="false" style="max-height: 700px; overflow: scroll">
                        <li *ngFor="let prdt of productArray">
                            <div class="inner_div_product cpoint" (click)="getSingleProductDetails(prdt.product_id)">
                                <div class="product_wrapper">
                                    <img src="{{imageServer + prdt.image}}" onerror="this.src='assets/images/user_avatar.jpg'">
                                </div>
                                <h5>{{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.count > 0)?prdt.count+' Reviews':'Be the first one to review.'}} </p>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <ng-template #noProductData>
                    No Data Found
                </ng-template>
                <hr>
            </div>
            <div class="clear"></div>
        </div>
    </div>
  </div>