<mat-card *ngIf="recipe && (!editionMode || mix)" class="x-centered y-centered">
  <mat-card-header>
    <mat-card-title *ngIf="!editionMode">Création d'un mélange pour la recette {{recipe.company.name}}
      - {{recipe.name}}</mat-card-title>
    <mat-card-title *ngIf="editionMode">Modification du mélange {{mix.mixType.name}} de la
      recette {{recipe.company.name}} - {{recipe.name}}</mat-card-title>
  </mat-card-header>
  <mat-card-content>
    <mat-form-field>
      <mat-label>Nom</mat-label>
      <input matInput type="text" [formControl]="nameControl"/>
      <mat-icon svgIcon="form-textbox" matSuffix></mat-icon>
    </mat-form-field>
    <mat-form-field>
      <mat-label>Type de produit</mat-label>
      <mat-select [formControl]="materialTypeControl">
        <mat-option
          *ngFor="let materialType of (materialTypes$ | async)"
          [value]="materialType.id">
          {{materialType.name}}
        </mat-option>
      </mat-select>
    </mat-form-field>

    <div class="mix-materials-wrapper">
      <ng-container *ngTemplateOutlet="mixEditor"></ng-container>
    </div>
  </mat-card-content>
  <mat-card-actions>
    <button mat-raised-button color="primary" routerLink="/color/edit/{{recipeId}}">Retour</button>
    <button *ngIf="editionMode && canDeleteMix" mat-raised-button color="warn" (click)="deleteConfirmBox.show()">Supprimer</button>
    <button mat-raised-button color="accent" [disabled]="!form.valid" (click)="submit()">Enregistrer</button>
  </mat-card-actions>
</mat-card>

<ng-template #mixEditor>
  <table #mixTable mat-table [dataSource]="mixMaterials">
    <ng-container matColumnDef="position">
      <th mat-header-cell *matHeaderCellDef>Position</th>
      <td mat-cell *matCellDef="let mixMaterial; let i = index">
        {{i + 1}}
      </td>
    </ng-container>

    <ng-container matColumnDef="material">
      <th mat-header-cell *matHeaderCellDef>Produit</th>
      <td mat-cell *matCellDef="let mixMaterial">
        <mat-form-field *ngIf="materials">
          <mat-select [(ngModel)]="mixMaterial.materialId">
            <mat-option *ngFor="let material of materials"
                        [value]="material.id">{{material.name}}</mat-option>
          </mat-select>
        </mat-form-field>
      </td>
    </ng-container>

    <ng-container matColumnDef="quantity">
      <th mat-header-cell *matHeaderCellDef>Quantité</th>
      <td mat-cell *matCellDef="let mixMaterial">
        <mat-form-field>
          <input matInput type="number" step="0.001" [(ngModel)]="mixMaterial.quantity"/>
        </mat-form-field>
      </td>
    </ng-container>

    <ng-container matColumnDef="units">
      <th mat-header-cell *matHeaderCellDef>Unités</th>
      <td mat-cell *matCellDef="let mixMaterial" class="units-wrapper">
        <ng-container *ngIf="materials">
          <ng-container *ngIf="materialUsePercentages(mixMaterial)">
            <p>%</p>
          </ng-container>
          <ng-container *ngIf="!materialUsePercentages(mixMaterial)">
            <ng-container *ngIf="!hoveredMixMaterial || hoveredMixMaterial != mixMaterial">
              <span>{{units}}</span>
            </ng-container>
            <ng-container *ngIf="hoveredMixMaterial && hoveredMixMaterial == mixMaterial">
              <cre-unit-selector [(unit)]="units" [showLabel]="false" [short]="true"></cre-unit-selector>
            </ng-container>
          </ng-container>
        </ng-container>
      </td>
    </ng-container>

    <ng-container matColumnDef="buttonRemove">
      <th mat-header-cell *matHeaderCellDef>
        <button mat-raised-button color="accent" (click)="addRow()">Ajouter</button>
      </th>
      <td mat-cell *matCellDef="let mixMaterial; let i = index">
        <ng-container *ngIf="hoveredMixMaterial && hoveredMixMaterial == mixMaterial">
          <button mat-raised-button color="warn" (click)="removeRow(i)">Retirer</button>
        </ng-container>
      </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="columns"></tr>
    <tr mat-row *matRowDef="let mixMaterial; columns: columns" (mouseover)="hoveredMixMaterial = mixMaterial"></tr>
  </table>
</ng-template>

<cre-confirm-box
  #deleteConfirmBox
  message="Voulez-vous vraiment supprimer le mélange {{mix.mixType.name}} de la recette {{recipe.company.name}} - {{recipe.name}}"
  (confirm)="delete()">
</cre-confirm-box>
