<div class="nav_header">
  <button class="nav_btn nav_back floatLeft" (click)="goBack()"></button>
  <div class="nav_title floatLeft">
    <input
      class="search_bar"
      placeholder="Search here.. eg:shirts, retailers etc..."
      (click)="searchModal()"
    />
  </div>
  <button
    class="nav_btn nav_search floatRight"
    *ngIf="!searchShow"
    (click)="searchModal()"
  ></button>
  <button
    class="nav_btn nav_close floatRight"
    *ngIf="searchShow"
    (click)="searchClose()"
  ></button>
  <div class="clear"></div>
</div>
<ion-content>
  <div class="home_wrapper">
    <div class="home_sub_header">
      Featured Stores
    </div>
    <div class="featured_slider">
      <ion-slides
        pager="false"
        [options]="slideOpts"
        *ngIf="shopperService.activeshoppers && filterFunction(shopperService.activeshoppers).length > 0"
      >
        <ion-slide
          *ngFor="let shopper of filterFunction(shopperService.activeshoppers)"
        >
          <div
            class="feature_product"
            (click)="goToPage('productlist', shopper)"
          >
            <img
              [src]="shopper.featuredImage"
              onerror="this.src='./../../assets/getmi_malls/featured/featured1.png'"
            />
            <div class="feature_overlay">
              <h5>{{shopper.name}}</h5>
              <p>{{shopper.caption}}</p>
            </div>
          </div>
        </ion-slide>
      </ion-slides>
    </div>
    <div class="home_sub_header" *ngIf="data">
      {{data.centerName}}
    </div>
    <div class="nearby_shop_list">
      <ul *ngIf="shopperService.shoppers && shopperService.shoppers.length > 0">
        <li
          *ngFor="let shopper of shopperService.shoppers"
          (click)="goToPage('productlist', shopper)"
        >
          <div class="nearby_image">
            <img
              [src]="shopper.profilePic"
              onerror="this.src='./../../assets/getmi_malls/store298/stores1.png'"
            />
          </div>
          <div class="nearby_detail">
            <h5>
              <span class="floatLeft">{{shopper.name}}</span>
              <span class="floatRight"
                >0
                <img src="../assets/Path61_2.png" />
              </span>
              <div class="clear"></div>
            </h5>
            <p>{{shopper.caption}}</p>
          </div>
          <div class="clear"></div>
        </li>
      </ul>
    </div>
  </div>
  <div class="loader" *ngIf="loader">
    <div class="lds-ripple">
      <div></div>
      <div></div>
    </div>
  </div>
</ion-content>
