<ion-header class="ion-no-border">
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/app/tabs/shop"></ion-back-button>
    </ion-buttons>
    <ion-title class="ion-text-center">{{ 'CART_TITLE' | translate }}</ion-title>
    <ion-buttons slot="end" (click)="showConfirmDeleteCart()" *ngIf="cartProvider.productsCart.length">
      <ion-icon slot="icon-only" name="trash-outline"></ion-icon>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-chip color="danger" class="w-98"
    *ngIf="cartProvider._statusMinimumOrderPrice && cartProvider._minimumOrderPrice > 0 && cartProvider.productsCart.length">
    <ion-icon name="alert-outline"></ion-icon>
    <ion-label color="danger">{{ 'MINIMUM1_ORDER_PRICE' | translate }} {{ 'MINIMUM2_ORDER_PRICE' | translate }}
      {{ cartProvider._minimumOrderPrice - cartProvider._subtotal | formatCurrency : currency}}</ion-label>
  </ion-chip>

  <app-product-list *ngIf="cartProvider.productsCart.length" [listProducts]="cartProvider.productsCart"
    [disabled_sliding]="false" [origin]="'cart'" [parent]="this"></app-product-list>

  <app-empty-component *ngIf="cartProvider._subtotal == 0 && !cartProvider.productsCart.length"
    [emptySettingsSlide]="emptySettingsSlide"></app-empty-component>
</ion-content>

<ion-footer>
  <ion-grid *ngIf="cartProvider.productsCart && cartProvider.productsCart.length">
    <app-total-summary [title]="'TEXT_SUMMARY_CONFIRM_ORDER' | translate" [subtotal]="cartProvider._subtotal"
      [priceDomicile]="cartProvider._priceDomicile" [discount]="cartProvider._discount" [total]="cartProvider._total"
      [serviceChargeEnabled]="cartProvider._serviceChargeEnabled"
      [serviceCharge]="cartProvider._serviceCharge"></app-total-summary>
    <ion-row>
      <ion-col size="12" class="ion-no-padding ion-no-margin">
        <ion-button expand="block" fill="solid" shape="round"
          [disabled]="!cartProvider._total || cartProvider._statusMinimumOrderPrice || !validConfirmPurchase"
          (click)="goToConfirmOrder()">{{ 'BUTTON_NEXT_CART' | translate }}</ion-button>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-footer>