<mat-expansion-panel class="table-title mt-5">
  <mat-expansion-panel-header>
    <mat-panel-title>{{mix.mixType.name}}</mat-panel-title>
  </mat-expansion-panel-header>

  <div class="mix-actions d-flex flex-row justify-content-between">
    <ng-container *ngIf="!editing">
      <div class="flex-grow-1">
        <mat-form-field class="dark">
          <mat-label>Casier</mat-label>
          <input matInput type="text" [(ngModel)]="mix.location" (change)="changeLocation($event)"/>
        </mat-form-field>
      </div>
      <div>
        <button mat-raised-button color="accent" (click)="printingConfirmBox.show()">Imprimer</button>
      </div>
      <div>
        <button mat-raised-button color="accent" (click)="deduct.emit()">Déduire</button>
      </div>
    </ng-container>
    <ng-container *ngIf="editing">
      <div class="flex-grow-1"></div>
      <button mat-raised-button color="accent" routerLink="/color/edit/mix/{{recipe.id}}/{{mix.id}}">Modifier</button>
    </ng-container>
  </div>

  <ng-container [ngTemplateOutlet]="mixTable"></ng-container>
</mat-expansion-panel>

<ng-template #mixTable>
  <table mat-table [dataSource]="mix.mixMaterials">
    <ng-container matColumnDef="material">
      <th mat-header-cell *matHeaderCellDef>Produit</th>
      <td mat-cell *matCellDef="let mixMaterial">{{mixMaterial.material.name}}</td>
      <td mat-footer-cell *matFooterCellDef></td>
    </ng-container>

    <ng-container matColumnDef="materialType">
      <th mat-header-cell *matHeaderCellDef>Type</th>
      <td mat-cell *matCellDef="let mixMaterial">{{mixMaterial.material.materialType.name}}</td>
      <td mat-footer-cell *matFooterCellDef></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"
            min="0.001"
            step="0.001"
            [value]="getComputedQuantityRounded(mixMaterial)"
            [disabled]="mixMaterial.material.materialType.usePercentages"
            (change)="changeQuantity($event, mixMaterial)"/>
        </mat-form-field>
      </td>
      <td mat-footer-cell *matFooterCellDef>
        <mat-form-field>
          <mat-label>Total</mat-label>
          <input
            matInput
            type="number"
            min="0.001"
            step="0.001"
            [value]="round(getTotalQuantity())"
            (change)="changeQuantity($event, null, true)"/>
        </mat-form-field>
      </td>
    </ng-container>

    <ng-container matColumnDef="quantityStatic">
      <th mat-header-cell *matHeaderCellDef>Quantité</th>
      <td mat-cell *matCellDef="let mixMaterial">{{getComputedQuantityRounded(mixMaterial)}}</td>
    </ng-container>

    <ng-container matColumnDef="quantityCalculated">
      <th mat-header-cell *matHeaderCellDef>Calcul</th>
      <td mat-cell *matCellDef="let mixMaterial; let i = index" [innerHTML]="getCalculatedQuantity(mixMaterial, i)"
          class="mix-calculation"></td>
      <td mat-footer-cell *matFooterCellDef></td>
    </ng-container>

    <ng-container matColumnDef="quantityUnits">
      <th mat-header-cell *matHeaderCellDef>Unités</th>
      <td mat-cell *matCellDef="let mixMaterial">
        <ng-container *ngIf="mixMaterial.material.materialType.usePercentages">%</ng-container>
        <ng-container *ngIf="!mixMaterial.material.materialType.usePercentages">{{units}}</ng-container>
      </td>
      <td mat-footer-cell *matFooterCellDef>{{units}}</td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="mixColumns"></tr>
    <tr mat-row *matRowDef="let mixMaterial; columns: mixColumns"
        [class.low-quantity]="!editing && isInLowQuantity(mixMaterial.id)"></tr>
    <ng-container *ngIf="!editing">
      <tr mat-footer-row *matFooterRowDef="mixColumns"></tr>
    </ng-container>
  </table>
</ng-template>

<cre-confirm-box
  #printingConfirmBox
  message="Voulez-vous vraiment imprimer ce mélange?"
  (confirm)="print()">
</cre-confirm-box>
