<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>{{product.color}}, {{product.size}} <span>{{product.qty}}</span></h5>
                          
                            <p>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>
</ion-content>
<div class="loader" *ngIf="loader">
    <div class="lds-ripple">
        <div></div>
        <div></div>
    </div>
</div>