ISA-Frontend/apps/isa-app/src/shared/shell/process-bar/process-bar-item/process-bar-item.component.html

@if (process(); as p) {
  <div
    class="tab-wrapper flex flex-row items-center justify-between border-b-[0.188rem] border-solid h-14"
    [class.border-surface]="!(isActive$ | async)"
    [class.border-brand]="isActive$ | async"
  >
    <a
      class="tab-link font-bold flex flex-row justify-center items-center whitespace-nowrap px-4 truncate max-w-[15rem] h-14"
      [href]="currentLocationUrlTree()?.toString()"
      (click)="navigateByUrl($event); scrollIntoView()"
    >
      <span class="truncate">
        {{ p.name }}
      </span>
      @if (showCart() && p.type === 'cart') {
        <button
          type="button"
          class="rounded-full px-3 h-[2.375rem] font-bold text-p1 flex flex-row items-center justify-between shopping-cart-count ml-4"
          [class.active]="isActive$ | async"
          [routerLink]="getCheckoutPath((process$ | async)?.id)"
          (click)="$event?.preventDefault(); $event?.stopPropagation()"
        >
          <shared-icon icon="shopping-cart-bold" [size]="22"></shared-icon>
          <span class="shopping-cart-count-label ml-2">{{ itemCount() }}</span>
        </button>
      }
    </a>
    <button
      type="button"
      class="tab-close-btn -ml-4 h-12 w-12 grid justify-center items-center"
      (click)="close()"
    >
      <shared-icon icon="close" [size]="28"></shared-icon>
    </button>
  </div>
}