<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..."> </div>
    <button class="nav_btn nav_search floatRight">
        <img src="../assets/search_2.png">
    </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 class="fav_fill" (click)="changeFav(product.prodId)" *ngIf="checkFavStatus(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="value1">
                    <label for="styled-checkbox-1">Popularity</label>
                </li>
                <li>
                    <input class="styled-checkbox" id="styled-checkbox-2" type="radio" value="value2">
                    <label for="styled-checkbox-2">Relevence</label>
                </li>
                <li>
                    <input class="styled-checkbox" id="styled-checkbox-3" type="radio" value="value3">
                    <label for="styled-checkbox-3">Price Low - High</label>
                </li>
                <li>
                    <input class="styled-checkbox" id="styled-checkbox-4" type="radio" value="value4">
                    <label for="styled-checkbox-4">Price High - Low</label>
                </li>
                <li>
                    <input class="styled-checkbox" id="styled-checkbox-5" type="radio" value="value5">
                    <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</button>
                <div class="clear"></div>
            </div>
        </div>

    </div>
</ion-content>