<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"
    (click)="clickSearch()"
  ></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">
          <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)">{{product.prodName}}</h5>
        <p (click)="prodDetails(i)">
          A$ {{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-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>
