<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-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/*" (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>
