<div class="nav_header">
  <button class="nav_btn nav_back floatLeft" (click)="goBack()"></button>
  <div class="nav_title floatLeft">
    <h4>MY ORDERS</h4>
  </div>
  <div class="clear"></div>
</div>
<ion-content>
  <div class="myorder_wrapper" *ngIf="myorder.orders">
    <ul *ngIf="myorder.orders.length > 0">
      <li *ngFor="let order of myorder.orders; let i = index">
        <div class="order_info">
          <h5 class="floatLeft">{{order.orderCode}}</h5>
          <button class="order_track floatRight" *ngIf="order.orderStatus >= 3 && order.orderStatus < 7"
            (click)="orderDetails(i)">
            Track Order
          </button>
          <div class="clear"></div>
        </div>
        <div *ngFor="let product of order.product" (click)="viewOrder(order)">
          <div class="order_image">
            <img [src]="product.image" onerror="" />
          </div>
          <div class="order_detail">
            <h5 class="floatLeft">{{product.prodName}}</h5>
            <div class="clear"></div>
            <h5>
              <span *ngIf="product.color !== 'No-Color'">{{product.color}},
              </span>
              <span *ngIf="product.size !== 'Any-Size'">{{product.size}}</span>&nbsp;<span>{{product.qty}}</span>
            </h5>

            <p *ngIf="product.price">A$ {{product.price}}</p>
          </div>
          <div class="order_other">
            <h6 class="floatRight">
              {{ order.bookDate.seconds * 1000 | date:'MMMM dd, y' }}
            </h6>
            <span class="floatRight" *ngIf="order.orderStatus < 3 || order.orderStatus >= 7"
              (click)="acceptOrder(order)">{{getStatus(order.orderStatus)}}</span>
            <div class="clear"></div>
            <!-- <button class="track_btn" *ngIf="order.orderStatus >= 3 && order.orderStatus < 7" (click)="orderDetails(i)">TRACK</button> -->
            <div class="clear"></div>
          </div>
          <div class="clear"></div>
          <hr />
        </div>

        <div class="order_info">
          <h5 class="floatRight">TOTAL PRICE : {{order.amount}}</h5>

          <div class="clear"></div>
        </div>
      </li>

      <!-- <li>
                <div class="order_image"></div>
                <div class="order_detail">
                    <h5 class="floatLeft">European Style V Neck</h5>
                    <div class="clear"></div>
                    <h5>Green, Small <span>3</span></h5>
                    <p>AU$99.00</p>
                </div>
                <div class="order_other">
                    <h6 class="floatRight">June 26th 2019</h6>
                    <div class="clear"></div>

                </div>
                <div class="clear"></div>
            </li>
            <li>
                <div class="order_image"></div>
                <div class="order_detail">
                    <h5 class="floatLeft">European Style V Neck</h5>
                    <div class="clear"></div>
                    <h5>Green, Small <span>3</span></h5>
                    <p>AU$99.00</p>
                </div>
                <div class="order_other">
                    <h6 class="floatRight">June 26th 2019</h6>
                    <div class="clear"></div>

                </div>
                <div class="clear"></div>
            </li>
            <li>
                <div class="order_image"></div>
                <div class="order_detail">
                    <h5 class="floatLeft">European Style V Neck</h5>
                    <div class="clear"></div>
                    <h5>Green, Small <span>3</span></h5>
                    <p>AU$99.00</p>
                </div>
                <div class="order_other">
                    <h6 class="floatRight">June 26th 2019</h6>
                    <div class="clear"></div>
                    <h5 class="floatRight">Cancelled</h5>
                    <div class="clear"></div>
                </div>
                <div class="clear"></div>
            </li> -->
    </ul>
    <div class="empty-wishlist-wrapper" *ngIf="myorder.orders.length == 0">
      <img src="../../assets/wishlist.png" />
      <h1>There is no order</h1>
      <button (click)="goToPage('home')">shop now</button>
    </div>
  </div>
</ion-content>
<div class="loader" *ngIf="loader">
  <div class="lds-ripple">
    <div></div>
    <div></div>
  </div>
</div>