<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)="clickSearch()">
    </div>
    <button class="nav_btn nav_search floatRight" *ngIf="!searchShow">
    </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 && shopperService.activeshoppers.length > 0">
                <ion-slide *ngFor="let shopper of 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>

</ion-content>

<div class="search_item_list" *ngIf="searchShow" [@slideInOut]>
    <ul>
        <li>sample</li>
    </ul>
</div>