<!--  Customer module process  -->
<div class="grid-item" id="{{ process.id }}" *ngIf="module === 0" [ngClass]="{ last: last }">
  <div class="grid-container" [ngClass]="{ 'selected-process': process.id === (currentProcessId$ | async) }">
    <div class="process-name-container pt-3" (click)="selectProcess(process)">
      <span class="process-name">{{ process.name }}</span>
    </div>
    <ng-container>
      <div class="cart-container" [ngClass]="{ download: cartBackgroundForDownload }" (click)="openCart(process)">
        <lib-icon
          mt="12px"
          ml="15px"
          width="17px"
          height="16px"
          name="Shopping_Cart"
          *ngIf="!cartBackgroundForDownload && process.id === (currentProcessId$ | async)"
          class="process-cart-icon"
        ></lib-icon>
        <lib-icon
          mt="12px"
          ml="15px"
          width="17px"
          height="16px"
          name="Shopping_Cart_Inactive"
          *ngIf="!cartBackgroundForDownload && process.id !== (currentProcessId$ | async)"
          class="process-cart-icon"
        ></lib-icon>
        <lib-icon
          mt="12px"
          ml="15px"
          width="17px"
          height="16px"
          name="shopping_cart_white"
          *ngIf="cartBackgroundForDownload"
          class="process-cart-icon"
        ></lib-icon>
        <div [@cartnumber]="cartanimation" class="pt-3 process-cart-number-container">
          <span class="process-cart-number" [ngClass]="{ 'number-download': cartBackgroundForDownload }">{{ cartCount }}</span>
        </div>
      </div>
    </ng-container>
    <div *ngIf="process.id === (currentProcessId$ | async)">
      <a (click)="openDeleteConfirmationDialog()">
        <lib-icon class="process-delete-icon" name="close" width="15px" height="15px" mt="12px"></lib-icon>
      </a>
    </div>
  </div>
  <app-process-delete-dialog #deleteporcessdialog (deleted)="deleteProcess($event)" [process]="process"></app-process-delete-dialog>
</div>
