<div class="grid-container">
  <div class="align-left">
    <div class="back-arrow-container" *ngIf="showBackContainer && !isIPad" (mouseover)="showBackIcon()" (mouseleave)="hideBackIcon()">
      <lib-icon class="icon" width="118px" height="50px" name="tab_Arrow" type="png" (click)="scrollBack()" *ngIf="showBack"></lib-icon>
    </div>
    <div class="process-grid-container" [ngClass]="{ adding: showAddingPadding }" *ngIf="module === 0" #panel>
      <app-process-tab
        id="{{ process.id }}"
        style="display: inline-block; height: 100%;"
        *ngFor="let process of processes; let last = last"
        [module]="module"
        [last]="last"
        [process]="process"
        [@add]="process.new"
      ></app-process-tab>
    </div>
    <div class="process-grid-container" *ngIf="module === 1" #panel>
      <app-process-tab
        id="{{ branchProcess.id }}"
        style="display: inline-block; height: 100%;"
        [module]="module"
        [process]="branchProcess"
      ></app-process-tab>
    </div>
    <div
      class="foward-arrow-container"
      *ngIf="showFowardContainer && !isIPad"
      (mouseover)="showFowardIcon()"
      (mouseleave)="hideFowardIcon()"
    >
      <lib-icon class="icon" width="118px" height="50px" name="tab_Arrow" type="png" (click)="scrollFoward()" *ngIf="showNext"></lib-icon>
    </div>
  </div>
  <div class="align-right">
    <div class="grid-container-fix-width-last-col">
      <div class="align-right add-process-label">
        <span *ngIf="processes && processes.length === 0 && module === 0" class="process-span" (click)="addProcess()">{{
          startProcessLabel
        }}</span>
      </div>
      <app-button *ngIf="module === 0" (action)="addProcess()" class="add-process" [type]="'small'">
        <lib-icon width="34px" height="36px" name="add-red"></lib-icon>
      </app-button>
    </div>
  </div>
</div>
