<div id="card-itens">
  <div class="offcanvas-header">
    <div class="row w-100 align-items-center">
      <div class="col-10">
        <div class="row align-items-center justify-content-center">
          <div class="col-2">
            <img
              class="ms-1"
              src="assets/icones/cart.svg"
              alt=""
              style="width: 25px; height: 25px"
            />
          </div>
          <div class="col-10">
            <h5>Produtos adicionados</h5>
          </div>
        </div>
      </div>
      <div class="col-2 ms-auto">
        <button
          type="button"
          class="btn-close text-reset"
          data-bs-dismiss="offcanvas"
          aria-label="Close"
        ></button>
      </div>
    </div>
  </div>
  <div class="offcanvas-body">
    <kendo-grid
      [data]="shopping$ | async"
      [height]="595"
    >
      <kendo-grid-column>
        <ng-template kendoGridCellTemplate let-dataItem>
          <!-- template for mobile -->
          <div class="row">
            <div class="col-4">
              <img
                *ngIf="!dataItem.image"
                src="assets/amico.png"
                alt=""
                style="width: 85px; height: 100px"
              />
              <img
                *ngIf="dataItem.image"
                src="{{ dataItem.image }}"
                alt=""
                style="width: 85px; height: 100px"
              />
            </div>
            <div class="col-8">
              <div class="col-12">
                <small class="d-block">{{ dataItem.smallDescription }}</small>
              </div>
              <div class="col-12 mt-2 fs-5 fw-bold">
                <span>{{ dataItem.price | currency: "BRL" }}</span>
              </div>
              <kendo-textbox
                #quantityCart
                class="text-center"
                style="width: 150px"
                [value]="dataItem.quantity"
                editor="numeric"
              >
                <ng-template kendoTextBoxPrefixTemplate>
                  <button
                    kendoButton
                    look="clear"
                    (click)="addQuantity(dataItem)"
                  >
                    <!--Adicionar quantidade -->
                    <span class="k-icon k-i-add"></span>
                  </button>
                </ng-template>
                <ng-template kendoTextBoxSuffixTemplate>
                  <button
                    kendoButton
                    look="clear"
                    (click)="minusQuantity(dataItem)"
                  >
                    <!--Reduzir quantidade-->
                    <span class="k-icon k-i-minus"></span>
                  </button>
                </ng-template>
              </kendo-textbox>
              <span
                *ngIf="(updating$ | async) || (loading$ | async)"
                class="ms-2 k-icon k-i-loading"
              ></span>
            </div>
          </div>
        </ng-template>
      </kendo-grid-column>
    </kendo-grid>
  </div>
  <div class="offcanvas-footer">
    <div class="row g-0">
      <div class="col-6">
        <button
          kendo-button
          class="btn-flat"
          data-bs-dismiss="offcanvas"
          (click)="cancelSale()"
        >
          <span class="text-btn-flat">Cancelar venda</span>
        </button>
      </div>
      <div class="col-6">
        <button
          kendo-button
          class="btn-blue"
          data-bs-dismiss="offcanvas"
          (click)="confirmSale('offcanvasRight')"
        >
          <span class="text-btn-blue">Finalizar venda</span>
        </button>
      </div>
    </div>
  </div>

</div>
