<div class="breadacrumb-grid" [ngClass]="{ 'grid-with-arrow': !showBack, 'breadcumb-mb-5': lowerMargin }" *ngIf="breadcrumbs">
  <app-back-arrow *ngIf="showBack" (back)="goBack(breadcrumbs[breadcrumbs.length - 2])" class="align-right back-arrow"></app-back-arrow>
  <div
    class="layer-fade-start"
    *ngIf="showBackNavigationArrow"
    (mouseover)="showBackNavArrow()"
    (mouseleave)="hideBackNavArrow($event)"
  ></div>
  <div class="icon-start" *ngIf="showBackNavigationArrow && showBackArrow" (click)="navigateBack()" (mouseleave)="hideBackNavArrowIcon()">
    <lib-icon class="icon-start" width="40px" name="tab_Arrow_3" type="png"></lib-icon>
  </div>
  <div class="breadcrumb-start-layer-fade" *ngIf="!showBackNavigationArrow"></div>
  <div class="align-center breadcrumb-container" #container>
    <span
      *ngFor="let breadcrumb of breadcrumbs; let i = index; let last = last"
      class="breadcrumb show"
      (click)="selectBreadcrumb(breadcrumb)"
      [ngClass]="{ selected: last, branch: module === 1 }"
    >
      <lib-icon *ngIf="breadcrumbs.indexOf(breadcrumb) > 0 && i != 0 && i !== last" class="next" name="Arrow_Next" alt="next"></lib-icon>
      <span>{{ breadcrumb ? breadcrumb.name : '' }}</span>
    </span>
    <span class="breadcrumb last" *ngIf="showBack"></span>
  </div>
  <div class="breadcrumb-end-layer-fade" *ngIf="!showForwardNavigationalArrow"></div>
  <div
    class="layer-fade-end"
    *ngIf="showForwardNavigationalArrow"
    (mouseover)="showForwardNavArrow()"
    (mouseleave)="hideForwardNavArrow($event)"
  ></div>
  <div
    class="icon-end"
    *ngIf="showForwardNavigationalArrow && showForrwardArrow"
    (click)="navigateForward()"
    (mouseleave)="hideForwardNavArrowIcon()"
  >
    <lib-icon class="icon-end" width="40px" name="tab_Arrow_2" type="png"></lib-icon>
  </div>
</div>
