<div class="recipe-info-wrapper d-flex flex-column">
  <div class="d-flex flex-column">
    <h3>{{recipe.company.name}} - {{recipe.name}}</h3>
  </div>
  <div class="d-flex flex-row">
    <div class="d-flex flex-column">
      <p>Échantillon #{{recipe.sample}}</p>
      <p *ngIf="recipe.approbationDate">Approuvée le {{recipe.approbationDate}}</p>
      <div *ngIf="!recipe.approbationDate" class="recipe-not-approved-wrapper d-flex flex-row">
        <p>Non approuvée</p>
        <mat-icon svgIcon="alert" class="color-warning"></mat-icon>
      </div>
      <p>{{recipe.remark}}</p>
    </div>
    <div class="recipe-description">
      <p>{{recipe.description}}</p>
    </div>

    <div class="flex-grow-1"></div>

    <mat-icon
      *ngIf="hasModifications"
      class="color-warning has-modification-icon mr-4"
      svgIcon="pencil"
      title="Les modifications apportées n'ont pas été enregistrées"
      [inline]="true">
    </mat-icon>
    <mat-icon
      *ngIf="!isBPacExtensionInstalled"
      color="warn"
      svgIcon="printer-alert"
      title="L'extension b-Pac n'est pas installée"
      [inline]="true">
    </mat-icon>
    <mat-icon
      *ngIf="isBPacExtensionInstalled"
      color="accent"
      svgIcon="printer"
      [inline]="true">
    </mat-icon>
  </div>
</div>
