<ion-header>
    <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)="goToPage('searchmodal')" />
        </div>
        <button class="nav_btn nav_search floatRight" *ngIf="!searchShow" (click)="goToPage('searchmodal')"></button>
        <button class="nav_btn nav_close floatRight" *ngIf="searchShow" (click)="searchClose()"></button>
        <div class="clear"></div>
    </div>
</ion-header>
<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">
                    <div class="load-back">
                        <img [src]="product.image" onerror="this.src='../assets/model1@3x.png'" (click)="prodDetails(i)" />
                    </div>
                    <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)" [innerHTML]="unEscape(product.prodName)"></h5>
                <p (click)="prodDetails(i)">
                    A$ {{service.formatNumber(product.price)}}<span class="offer" *ngIf="product.discount > 0">-{{product.discount}}%</span>
                </p>
            </li>
        </ul>
    </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 class="no-result-wrapper" *ngIf="prodService.product.length === 0">
        <img src="../../assets/basket.png" />
        <h1>No result found</h1>
        <button (click)="goToPage('home')">home</button>
    </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-1" type="radio" value="newest" name="sort" (click)="setValue($event.target.value)" />
                    <label for="styled-checkbox-1">Newest First</label>
                </li>
                <li>
                    <input class="styled-checkbox" id="styled-checkbox-5" type="radio" value="a-z" name="sort" (click)="setValue($event.target.value)" />
                    <label for="styled-checkbox-5">Name A - Z</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>
    <div class="loader" *ngIf="loader">
        <div class="lds-ripple">
            <div></div>
            <div></div>
        </div>
    </div>
</ion-content>