<ion-header>
    <div class="nav_header" *ngIf="!isShow">
        <ion-menu-toggle>
            <button class="nav_btn nav_menu floatLeft"></button>
        </ion-menu-toggle>

        <div class="nav_title floatLeft relative">
            <!-- <input class="search_bar" placeholder="Search here.. eg:shirts, retailers etc..." (click)="clickSearch()" (input)="searchFun($event.target.value)" #searchText> -->

            <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="home_wrapper">
        <div class="home_banner">
            <div class="home_banner_title">
                <ion-row>
                    <ion-col class="textLeft">
                        <img src="../assets/Group 11_2.png" />
                    </ion-col>
                    <ion-col class="textRight">
                        <p class="floatRight" (click)="istoggle()">{{address}}</p>
                    </ion-col>
                </ion-row>
            </div>
            <ion-slides pager="true" *ngIf="centerService.centers && centerService.centers.length > 0">
                <ion-slide *ngFor="let center of centerService.centers">
                    <div class="banner_slide" (click)="goToPage('storelist', center)">
                        <h5>{{center.centerName}}</h5>
                        <p>{{center.description}}</p>
                    </div>
                    <img [src]="center.centerImg" onerror="this.src='./../../assets/getmi_malls/mall_banner/mall_4.png'" />
                </ion-slide>
            </ion-slides>
        </div>
        <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-slide>
                    <div class="feature_product" (click)="goToPage('productlist')">
                        <img src="../assets/videoblocks-woman-using-phone-purchase-in-cool-sunglasses-and-black-dress-holding-black-shopping-bag-isolated-on-dark-background-in-black-friday-holid@3x.png">
                        <div class="feature_overlay">
                            <h5>Flames Fashion</h5>
                            <p>Women Fashion</p>
                        </div>
                    </div>
                </ion-slide> -->
            </ion-slides>
        </div>
        <div class="home_sub_header">
            <span class="floatLeft">Nearby Shopping Centers</span>
            <!-- <span class="floatRight">
                <div class="nearby_icon" (click)="goToPage('nearby')"></div>
            </span> -->
            <div class="clear"></div>
        </div>
        <div class="nearby_shop_list">
            <ul *ngIf="centerService.nearcenters && centerService.nearcenters.length > 0">
                <li *ngFor="let center of centerService.nearcenters" (click)="goToPage('storelist', center)">
                    <div class="nearby_image">
                        <img [src]="center.centerImg" onerror="this.src='./../../assets/getmi_malls/mall_298/mall2.png'" />
                    </div>
                    <div class="nearby_detail">
                        <h5>
                            <span class="floatLeft">{{center.centerName}}</span>
                            <span class="floatRight">0
                <img src="../assets/Path61_2.png" />
              </span>
                            <div class="clear"></div>
                        </h5>
                        <p>{{center.description}}</p>
                    </div>
                    <div class="clear"></div>
                </li>
            </ul>
        </div>
        <div class="home_sub_header">
            Featured Categories
        </div>
        <div class="featured_catagory_list">
            <ul *ngIf="categoriesService.activecategories && categoriesService.activecategories.length > 0">
                <li *ngFor="let categories of categoriesService.activecategories" (click)="goToPage('catstorelist', categories)">
                    <img [src]="categories.catImage" onerror="this.src='../assets/handsome-man-outdoors-drinking-coffee-with-sunglasses-guy-with-beard-instagram-effect_1212-818@3x.png'" />
                    <div class="featured_overlay">
                        <h4>{{categories.catName}}</h4>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</ion-content>
<div *ngIf="isShow" [@slideInOut]>
    <ion-header>
        <div class="nav_header">
            <button class="nav_btn nav_back floatLeft" (click)="istoggle()">
        <img src="../assets/Group17_2.png" />
      </button>
            <div class="nav_title floatLeft">
                <h4>CHANGE LOCATION</h4>
            </div>
            <div class="clear"></div>
        </div>
    </ion-header>
    <ion-content class="sort_wrappper">
        <agm-map [zoom]="20" [latitude]="lat" [longitude]="lng" [disableDefaultUI]="false" [zoomControl]="false" [backgroundColor]="'rgba(29, 27, 130,0.2)'">
            <agm-marker [latitude]="lat" [longitude]="lng" [iconUrl]="
      {
        url: './assets/pin.svg',
        scaledSize: {
            width: 28,
            height: 40
        }}"></agm-marker>
        </agm-map>
        <div class="add_address_wrapper">
            <h5 class="floatLeft">ADDRESS LIST</h5>
            <h5 class="floatRight" (click)="istoggle(); goToPage('nearby')">
                ADD NEW
            </h5>
            <div class="clear"></div>
            <div>
                <ul class="address-ul" *ngIf="addressService.addressList && addressService.addressList.length > 0">
                    <li *ngFor="let address of addressService.addressList; let i = index">
                        <div class="floatLeft">
                            {{address.default}}
                            <input class="styled-checkbox" name="addressId" id="styled-checkbox-{{i}}" type="radio" (click)="setDefault(address)" [value]="address.addressId" #addressType [checked]="address.defaultVal == 1" />
                            <label for="styled-checkbox-{{i}}">
                {{address.addressType}}
              </label>
                        </div>
                        <div class="floatLeft">
                            <p>
                                {{address.building}}, {{address.landmark}}, {{address.address}}
                            </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>
</div>