<ion-header>
    <div class="nav_header">
        <ion-menu-toggle>
            <button class="nav_btn nav_menu floatLeft"></button>
        </ion-menu-toggle>
        <div class="nav_title floatLeft">
            <img src="../../assets/Group 11@3x.png" />
        </div>
        <div class="clear"></div>
    </div>

</ion-header>

<ion-content>
    <div class="profile_wrapper" *ngIf="loggedUser">
        <div class="profile_banner">
            <!-- <div class="profile_circle">
        <div class="edit"></div>
      </div> -->

            <div class="profile_circle">
                <img [src]="loggedUser.profilePhoto" onerror="this.src='./../assets/asset_avatar.png'" />
                <div class="edit"></div>
                <input type="file" accept="image/*;capture=camera" (change)="fileChange($event)" />
            </div>

            <h5>{{loggedUser.name}}</h5>
            <p (click)="istoggle()">LOGOUT</p>
        </div>
        <div class="account_wrapper">
            <div class="account_header">
                <h5 class="floatLeft">ACCOUNT INFORMATION</h5>
                <span class="floatRight" (click)="goToPage('changedetails', user && user)"><img
            src="../../assets/edit.png" /></span>
                <div class="clear"></div>
            </div>
            <div class="row">
                <ion-row>
                    <ion-col class="textLeft p0">
                        <p>
                            Phone
                        </p>
                    </ion-col>
                    <ion-col class="textRight p0">
                        <h6>{{loggedUser.phone}}</h6>
                        <span class="ar-span" *ngIf="loggedUser.phoneVerified == true">Verified</span>
                        <span class="ar-span" *ngIf="loggedUser.phoneVerified == false">Not Verified yet</span>
                    </ion-col>
                </ion-row>
            </div>
            <div class="row">
                <ion-row>
                    <ion-col class="textLeft p0">
                        <p>
                            Email
                        </p>
                    </ion-col>
                    <ion-col class="textRight p0">
                        <h6>{{loggedUser.emailId}}</h6>
                        <span class="ar-span" *ngIf="loggedUser.emailVerified == true">Verified</span>
                        <span class="ar-span" *ngIf="loggedUser.emailVerified == false">Not Verified yet</span>
                    </ion-col>
                </ion-row>
            </div>
            <hr />
            <ion-row (click)="goToPage('wishlist')">
                <ion-col class="textLeft p0">
                    <p>Wishlist</p>
                </ion-col>
                <ion-col class="textRight p0">
                    <h6 *ngIf="wishService.whishItem">
                        ({{wishService.whishItem.length}})
                    </h6>
                </ion-col>
            </ion-row>
            <hr />
            <ion-row (click)="goToPage('address')">
                <ion-col class="textLeft p0">
                    <p>Address</p>
                </ion-col>
                <ion-col class="textRight p0">
                    <h6 *ngIf="addressService.addList">
                        ({{addressService.addressList.length}})
                    </h6>
                </ion-col>
            </ion-row>
            <hr />
            <!-- <ion-row>
        <ion-col class="textLeft p0">
          <p>My Cards</p>
        </ion-col>
        <ion-col class="textRight p0" (click)="goToPage('addcard')">
          <h6>
            <ion-icon name="arrow-forward"></ion-icon>
          </h6>
        </ion-col>
      </ion-row>
      <hr /> -->
            <ion-row (click)="goToPage('myorder')">
                <ion-col class="textLeft p0">
                    <p>My Order</p>
                </ion-col>
                <ion-col class="textRight p0">
                    <h6>
                        <ion-icon name="arrow-forward"></ion-icon>
                    </h6>
                </ion-col>
            </ion-row>
            <hr />
            <ion-row (click)="goToPage('preference')">
                <ion-col class="textLeft p0">
                    <p>Preferences</p>
                </ion-col>
                <ion-col class="textRight p0">
                    <h6>
                        <ion-icon name="arrow-forward"></ion-icon>
                    </h6>
                </ion-col>
            </ion-row>
            <hr />
            <ion-row>
                <ion-col class="textLeft p0">
                    <p>Currency</p>
                </ion-col>
                <ion-col class="textRight p0">
                    <h6>
                        <span>AUD</span>
                    </h6>
                </ion-col>
            </ion-row>
        </div>
        <div class="logout-pop-wrapper" *ngIf="isShow" [@slideInOut]>
            <div class="logout_inner">
                <h4>Logout</h4>
                <p>Are you sure to Logout ?</p>
                <div class="logout_footer">
                    <button class="btn-cancel floatLeft" (click)="istoggle();">
            Cancel
          </button>
                    <button class="btn-logout floatRight" (click)="authService.SignOut(); istoggle()">
            Logout
          </button>
                </div>

                <div class="clear"></div>
            </div>
        </div>
    </div>
</ion-content>
<div class="loader" *ngIf="loader">
    <div class="lds-ripple">
        <div></div>
        <div></div>
    </div>
</div>