<ion-header>
    <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-header>

<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">{{unEscape(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$ {{service.formatNumber(product.price.toFixed(2))}}</p>
                    </div>
                    <div class="order_other">
                        <h6 class="floatRight" *ngIf="order.bookDate">
                            {{ 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 : {{getProductTotal(order.product)}}</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>