<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)="goToPage('myorder')"
        >
          <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 onerror="this.src='../assets/Path27@3x.png'" />
      <h4>ORDER CANCELLED</h4>
      <p>{{orderCancelled | date:'MMMM dd, y'}}</p>
    </div>
    <div class="nearby_shop_list">
      <ul>
        <li (click)="goToPage('productlist')">
          <div class="nearby_image">
            <img
              [src]="data.product[0].image"
              onerror="this.src='../assets/5bf42c4220000057060294f8@3x.png'"
            />
          </div>
          <div class="nearby_detail">
            <h5>
              <span class="floatLeft">{{data.shopperName}}</span>
              <span class="floatRight"
                >4
                <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>
        <span *ngIf="product.color !== 'No-Color'">{{product.color}}, </span>
        <span *ngIf="product.size !== 'Any-Size'">{{product.size}}</span>
      </h6>
      <h5>Quantity : <span>{{product.qty}}</span></h5>
      <h5>Amount : <strong>A$ {{product.price}}</strong></h5>
      <h5>Delivery time : <span> 1 hour</span></h5>
      <h4>DELIVERY</h4>
      <h5 *ngIf="data.deliveryAddress">
        {{data.deliveryAddress.addressType}},<br />{{data.deliveryAddress.address}},
        <br />
        {{data.deliveryAddress.building}}, <br />
        {{data.deliveryAddress.landmark}}
      </h5>
      <!-- <button
        class="cancel_btn"
        (click)="goToPage('ordercancelled')"
      >
        BUY NOW
      </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>
