<ion-content>
    <div class="cart_wrapper" *ngIf="data">
        <div class="cart_head">
            <div class="nav_header">
                <button class="nav_btn nav_back_white floatLeft" (click)="goBack()">
                    <img src="../assets/arrow_white.png">
        </button>
                <div class="nav_title floatLeft">
                    <h4></h4>
                </div>
                <button class="nav_btn floatRight">
        </button>
                <div class="clear"></div>
            </div>
            <img src="../assets/white_tick.png">
            <h4>ORDER IS PLACED</h4>
            <p>{{ data.bookDate.seconds * 1000 | date:'MMMM dd, y' }}</p>
        </div>
        <div class="order_status">

            <div class="clear"></div>
            <div class="status_div go_green">
                <h4>Order Placed</h4>
                <h6>{{ data.bookDate.seconds * 1000 | date:'MMMM dd, y' }}</h6>
            </div>
            <!-- <div class="status_gap go_green">
            </div>
            <div class="status_div go_green">
                <h4>Retailer Accepted</h4>
                <h6>June 26th 2019, 03:05PM</h6>
            </div>
            <div class="status_gap go_green">
            </div>
            <div class="status_div go_green">
                <div class="floatLeft">
                    <h4>Product Packed</h4>
                    <h6>June 26th 2019, 03:10PM</h6>
                </div>
                <button class="track_btn floatRight" (click)="goToPage('trackorder')">Track Order</button>
                <div class="clear"></div>
            </div>
            <div class="status_gap go_green">
            </div>
            <div class="status_div go_green">
                <h4>Rider is assigned to shop</h4>
                <h6>June 26th 2019, 03:12PM</h6>
            </div>
            <div class="status_gap go_green">
            </div>
            <div class="status_div go_green">
                <h4>Rider has picked up your product and on the way</h4>
                <h6>June 26th 2019, 03:15PM</h6>
            </div>
            <div class="status_gap">
            </div>
            <div class="status_div">
                <h4>Your product is delivered</h4>
            </div> -->
        </div>
        <div class="nearby_shop_list">
            <ul>
                <li (click)="goToPage('productlist')">
                    <div class="nearby_image">
                        <img src="../assets/5bf42c4220000057060294f8@3x.png">
                    </div>
                    <div class="nearby_detail">
                        <h5>
                            <span class="floatLeft">{{data.shopperName}}</span>
                            <span class="floatRight">0
                     <img src="../assets/Path61_2.png">
                   </span>
                            <div class="clear"></div>
                        </h5>
                        <p>Men's & Women's Fashion</p>
                    </div>
                    <div class="clear"></div>
                </li>
            </ul>
        </div>
        <div class="product_detail" *ngFor="let product of data.product">
            <h6>{{product.color}}, {{product.size}}</h6>
            <h5>Quantity : <span>{{product.qty}}</span></h5>
            <h5>Amount : <strong>A$ {{product.price}}</strong><span class="afterpay">COD</span></h5>
            <h5>Delivery time : <span>Delivery in 1 hour</span></h5>
            <h4>DELIVERY</h4>
            <h5>
                {{deliveryAddress}}
            </h5>
            <button class="cancel_btn" (click)="goToPage('ordercancelled')">CANCEL THIS ORDER</button>
            <hr>
        </div>

        <!-- <div class="related_product_slider">
            <h5>
                <span class="floatLeft">Related Products</span><span class="floatRight">MORE</span>
                <div class="clear"></div>
            </h5>
            <ul>
                <ion-slides pager="false" [options]="relatedProd">
                    <ion-slide>
                        <li (click)="goToPage('productdetail')">
                            <div class="product_image">
                                <img src="../assets/model1@3x.png">
                                <div class="fav_icon">
                                </div>
                            </div>
                            <h5>European Style V Neck</h5>
                            <p>AU$99.00</p>
                        </li>
                    </ion-slide>
                    <ion-slide>
                        <li (click)="goToPage('productdetail')">
                            <div class="product_image">
                                <img src="../assets/Recommended-Ball-Gown-Floor-Length-V-Neck-Lace-Organza-Prom-Dress-OD850662@3x.png">
                                <div class="fav_icon">
                                </div>
                            </div>
                            <h5>European Style V Neck</h5>
                            <p>AU$99.00</p>
                        </li>
                    </ion-slide>
                    <ion-slide>
                        <li (click)="goToPage('productdetail')">
                            <div class="product_image">
                                <img src="../assets/51oNoK8JdCL._UY550_@3x.png">
                                <div class="fav_icon">
                                </div>
                            </div>
                            <h5>European Style V Neck</h5>
                            <p>AU$99.00 <span class="offer">-8%</span></p>
                        </li>
                    </ion-slide>
                    <ion-slide>
                        <li (click)="goToPage('productdetail')">
                            <div class="product_image">
                                <img src="../assets/DOGTS033-111-495x660@3x.png">
                                <div class="fav_icon">
                                </div>
                                <div class="featured_badge">Featured</div>
                            </div>
                            <h5>European Style V Neck</h5>
                            <p>AU$99.00<span>AU$110.00</span></p>
                        </li>
                    </ion-slide>
                </ion-slides>
            </ul>
        </div> -->
    </div>
</ion-content>