<mat-dialog-content>
    <h3 mat-dialog-title>
        <span *ngIf="data">Update</span>
        <span *ngIf="!data">Create</span> Formula</h3>
    <mat-form-field class="w-100">
        <input matInput placeholder="Name" name="name" [(ngModel)]="name">
    </mat-form-field>
    <mat-checkbox class="float-right" [(ngModel)]="approved">Approved</mat-checkbox>
    <mat-form-field>
        <mat-select placeholder="Component" [(ngModel)]="component">
            <mat-option *ngFor="let c of componentsList" [value]="c.name">
                {{c.name}}
            </mat-option>
        </mat-select>
    </mat-form-field>
    <mat-form-field style="width: 75px">
        <input matInput type="number" placeholder="Amount" [(ngModel)]="amount">
    </mat-form-field>
    <mat-form-field style="width: 40px">
        <mat-select placeholder="Unit" [(ngModel)]="unit">
            <mat-option value="g">g</mat-option>
            <mat-option value="oz">oz</mat-option>
            <mat-option value="kg">kg</mat-option>
            <mat-option value="lb">lb</mat-option>
        </mat-select>
    </mat-form-field>
    <button mat-raised-button class="ml-3" (click)="add()">Add</button>
    <table class="w-100 table">
        <thead>
            <tr>
                <th>Name</th>
                <th>Quantity</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let c of components; let i = index">
                <td>{{c.name}}</td>
                <td>{{c.quantity | convertFromG: unit}} {{unit}}</td>
                <td>
                    <button mat-icon-button (click)="remove(i)">
                        <mat-icon>delete</mat-icon>
                    </button>
                </td>
            </tr>
        </tbody>
    </table>
    <div class="float-right">
        <strong>Yield: </strong>{{total() | convertFromG: unit}} {{unit}}
    </div>
</mat-dialog-content>
<mat-dialog-actions>
    <button mat-raised-button type="submit" form="createForm" color="primary" (click)="submit()" [disabled]="components.length < 1 || !name">
        <span *ngIf="data">Update</span>
        <span *ngIf="!data">Create</span>
    </button>
</mat-dialog-actions>