<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">
        <input class="search_bar" placeholder="Search here.. eg:shirts, retailers etc..." (click)="clickSearch()">
    </div>
    <button class="nav_btn nav_search floatRight" *ngIf="!searchShow">
    </button>
    <button class="nav_btn nav_close floatRight" *ngIf="searchShow" (click)="searchClose()">
    </button>
    <div class="clear"></div>
</div>
<ion-content>

    <div class="product_list">
        <div class="product_taskbar">
            <div class="filter floatLeft" (click)="istoggle()">

            </div>
            <div class="viewset floatRight">
                <div class="grid_view grid_act floatRight" (click)="gridToggle()" [class.line_view]="onGrid">
                </div>
                <div class="clear"></div>
            </div>
            <div class="clear"></div>
        </div>
        <div class="product_title" *ngIf="data">
            {{data.shopName}}
        </div>
        <ul [class.grid_view]="onGrid" *ngIf="prodService.product && prodService.product.length > 0">
            <li *ngFor="let product of prodService.product; let i = index">
                <div class="product_image">
                    <img [src]="product.image" onerror="this.src='../assets/model1@3x.png'" (click)="prodDetails(i)">
                    <div [ngClass]="checkFavStatus(product.prodId)" (click)="changeFav(product.prodId)">
                    </div>
                    <div class="featured_badge" *ngIf="product.featured">Featured</div>
                </div>
                <h5 class="ellipse" (click)="prodDetails(i)">{{product.prodName}}</h5>
                <p (click)="prodDetails(i)">A$ {{product.price}}<span class="offer" *ngIf="product.discount > 0">-{{product.discount}}%</span></p>
            </li>
        </ul>
    </div>
    <div class="sort_wrappper" *ngIf="isShow" [@slideInOut]>
        <div class="sort_inner">
            <h4>Sort By</h4>
            <ul>
                <!-- <li>
                    <input class="styled-checkbox" id="styled-checkbox-1" type="radio" value="popular" name="sort" (click)="setValue($event.target.value)">
                    <label for="styled-checkbox-1">Popularity</label>
                </li> -->
                <!-- <li>
                    <input class="styled-checkbox" id="styled-checkbox-2" type="radio" value="relevance" name="sort" (click)="setValue($event.target.value)">
                    <label for="styled-checkbox-2">Relevence</label>
                </li> -->
                <li>
                    <input class="styled-checkbox" id="styled-checkbox-3" type="radio" value="low" name="sort" (click)="setValue($event.target.value)">
                    <label for="styled-checkbox-3">Price Low - High</label>
                </li>
                <li>
                    <input class="styled-checkbox" id="styled-checkbox-4" type="radio" value="high" name="sort" (click)="setValue($event.target.value)">
                    <label for="styled-checkbox-4">Price High - Low</label>
                </li>
                <!-- <li>
                    <input class="styled-checkbox" id="styled-checkbox-5" type="radio" value="rate" name="sort" (click)="setValue($event.target.value)">
                    <label for="styled-checkbox-5">Rating</label>
                </li> -->
            </ul>
            <div class="sort_footer">
                <button class="cancel floatLeft" (click)="istoggle()">CANCEL</button>
                <button class="submit floatRight" (click)="istoggle(); submit()">SUBMIT</button>
                <div class="clear"></div>
            </div>
        </div>

    </div>
</ion-content>
<div class="search_item_list" *ngIf="searchShow" [@slideInOut]>
        <ul *ngIf="searchService.searchList">
            <li *ngFor="let search of searchService.searchList" (click)="viewPage(search)">{{search.text}}</li>
        </ul>
    </div>