<ion-header>
    <div class="nav_header" *ngIf="!isShow">

        <div class="custom-header">
            <div class="menu-sctn">
                <ion-menu-toggle>
                    <button class="nav_btn nav_menu floatLeft"></button>
                </ion-menu-toggle>
            </div>
            <div class="mid-sctn">
                <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> -->

                    <h1 class="search_bar" (click)="goToPage('searchmodal')">Search here.. eg:shirts, retailers etc...
                    </h1>
                </div>
            </div>
            <div class="search-sctn">
                <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>
        </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 Retailers</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">
            <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)="istoggle()">
                            <img src="../assets/Group17_2.png" />
                        </button>
                    </ion-col>
                    <ion-col class="no-gutter" size="8">
                        <div class="nav_title floatLeft">
                            <h4>CHANGE LOCATION</h4>
                        </div>
                    </ion-col>
                    <ion-col class="no-gutter" size="2"></ion-col>
                </ion-row>
            </ion-grid>
        </div>
    </ion-header>
    <ion-content class="sort_wrappper">
        <div class="location-finder">

            <input type="text" placeholder="Search for location" (keydown.enter)="$event.preventDefault()"
                autocorrect="off" autocapitalize="off" spellcheck="off" type="text" #building>

        </div>
        <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-2.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">
                    <li>
                        <div>
                            <input class="styled-checkbox" name="addressId" id="styled-checkbox-00" type="radio"
                                (click)="viewNearStore()" />
                            <label for="styled-checkbox-00">
                                CURRENT LOCATION
                            </label>
                        </div>
                        <div>
                            <p>
                                {{getAddressCurrent()}}
                            </p>
                        </div>
                        <div class="clear"></div>
                    </li>
                </ul> -->

                <ul class="address-ul" *ngIf="addressService.addressList && addressService.addressList.length > 0">
                    <li *ngFor="let address of addressService.addressList; let i = index">
                        <div>
                            {{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>
                            <p>{{address.building}}<span *ngIf="address.landmark && address.landmark!==''">,
                                    {{address.landmark}}</span>
                                <!-- {{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>