<ion-header>
    <div class="nav_header">
        <ion-grid class="no-gutter">
            <ion-row class="no-gutter">
                <ion-col class="no-gutter" size="2">
                    <button class="nav_btn nav_back floatLeft" (click)="goBack()"></button>
                </ion-col>
                <ion-col class="no-gutter" size="8">
                    <div class="nav_title floatLeft">
                        <input class="search_bar" placeholder="Search here.. eg:shirts, retailers etc..."
                            (click)="clickSearch()" />
                    </div>
                </ion-col>
                <ion-col class="no-gutter" size="2">
                    <button class="nav_btn nav_search floatRight" *ngIf="!searchShow"></button>
                    <button class="nav_btn nav_close floatRight" *ngIf="searchShow" (click)="searchClose()"></button>
                </ion-col>
            </ion-row>
        </ion-grid>
    </div>
</ion-header>
<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.shoppers && shopperService.shoppers.length > 0">
                <ion-slide *ngFor="let shopper of shopperService.shoppers" [hidden]="!shopper.featured">
                    <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.catName}}
        </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.profilePhoto"
                            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 class="no-result-wrapper" *ngIf="shopperService.shoppers.length === 0">
                <img src="../../assets/basket.png" />
                <h1>No result found</h1>
                <button (click)="goToPage('home')">home</button>
            </div>
        </div>
    </div>
    <div class="loader" *ngIf="loader">
        <div class="lds-ripple">
            <div></div>
            <div></div>
        </div>
    </div>
</ion-content>