Cart

<ion-header>

  <ion-navbar>
    <ion-title>Carrinho</ion-title>
  </ion-navbar>

</ion-header>


<ion-content full>
  <div *ngIf="isEmptyCart" class="empty-cart">
    <div class="empty-results">
      <h3 text-center>
        <ion-icon name="cart"></ion-icon>
      </h3>
      <p text-center>
        Seu carrinho está vazio.
      </p>
    </div>
  </div>

  <div *ngIf="!isEmptyCart" class="cart-itm-wrap">

    <ion-card *ngFor="let itm of cartItems; let i = index">
      <ion-card-content>
        <ion-row>
          <ion-col col-7>
            <h3 style="margin: 7px" text-left>{{itm.name}}</h3>

            <div class="itm-footer">
              <span class="remove" (click)="removeItem(itm.product_id)">
                <ion-icon name="trash"></ion-icon>
                {{i}}
              </span>

              <span class="price">
               {{itm.price | currency:'BRL':symbol:'1.2-2'}} x {{itm.count}} = {{itm.totalPrice | currency:'BRL':symbol:'1.2-2'}}
              </span>
            </div>
          </ion-col>
          <ion-col>
            <ion-item>
              <ion-avatar>
                <img style="float: right" src="{{itm.thumb}}">
              </ion-avatar>
            </ion-item>
            <p text-right>
              Qtd: {{itm.count}}
            </p>
          </ion-col>

        </ion-row>
      </ion-card-content>
    </ion-card>
    <button ion-button block round raised (click)="removeAll()">Remover tudo</button>
  </div>
</ion-content>

<ion-footer *ngIf="!isEmptyCart" class="single-footer">
  <button ion-button full color="secondary" (click)="checkOut()" [disabled]="isEmptyCart">
    {{totalAmount | currency:'BRL':symbol:'1.2-2'}} &nbsp; &nbsp; Finalizar compra
  </button>
</ion-footer>