<mat-drawer-container class="flex-grow-1">
    <mat-drawer #drawer class="d-print-none" [mode]="mobile ? 'over' : 'side'" [opened]="!mobile" [disableClose]="!mobile" [autoFocus]="false">
        <div class="sticky-top bg-white">
            <mat-form-field appearance="outline" class="mx-3 mt-3 pb-0">
                <mat-label>Search</mat-label>
                <input #search matInput>
                <mat-icon matSuffix>search</mat-icon>
            </mat-form-field>
        </div>
        <mat-divider></mat-divider>
        <mat-list>
            <ng-container *ngFor="let f of formulas | async; let i = index">
                <mat-divider *ngIf="f.name.toLowerCase().indexOf(search.value.toLowerCase()) != -1 && i > 0"></mat-divider>
                <mat-list-item *ngIf="f.name.toLowerCase().indexOf(search.value.toLowerCase()) != -1" (click)="displayFormula(f)" [ngClass]="{'active': f.id == formula?.id}">
                    <mat-icon *ngIf="!f.approved" class="mr-3 text-danger">remove_circle</mat-icon>
                    {{f.name}}
                </mat-list-item>
            </ng-container>
        </mat-list>
    </mat-drawer>
    <mat-drawer-content class="p-3 bg-white ml-print-0" style="min-height: 450px; background: url('assets/img/splatter.jpg') center; background-size: cover;">
        <div class="d-block d-print-none" style="overflow: auto">
            <button *ngIf="mobile" class="mr-2" mat-raised-button (click)="drawer.open()">
                <mat-icon>opacity</mat-icon> Formulas
            </button>
            <span *ngIf="store.user" class="float-md-right">
                <button mat-raised-button class="mr-2" (click)="newFormula()">
                    <mat-icon>add</mat-icon> Create
                </button>
                <button mat-raised-button (click)="openComponents()">
                    <mat-icon>list_alt</mat-icon> Components
                </button>
            </span>
        </div>
        <div *ngIf="(electron.isElectronApp || mobile) && !formula">
            <img src="assets/img/starthere.png" class="m-4">
        </div>
        <mat-card *ngIf="!electron.isElectronApp && !mobile && !formula" class="mx-auto mt-4" style="max-width: 600px">
            <mat-card-header>
                <mat-card-title>
                    <h1 class="display-4" style="color: #53709f">Formula Manager</h1>
                </mat-card-title>
            </mat-card-header>
            <mat-card-content>
                <p class="ml-3 lead text-white-50">Tired of using your browser? Download the standalone version of the Formula Manager.</p>
                <button mat-button class="button-fix"><i class="fab fa-windows mr-1 mb-1"></i> Windows</button>
                <button mat-button class="button-fix ml-2"><i class="fab fa-apple mr-1 mb-1"></i> MacOS</button>
                <button mat-button class="button-fix ml-2"><i class="fab fa-linux mr-1 mb-1"></i> Linux</button>
            </mat-card-content>
        </mat-card>
        <mat-card *ngIf="formula" class="my-4 mx-auto formula-card">
            <div class="d-none d-print-block mb-5 pb-5">
                <h1 class="mb-0">FH & Sons: Formula Manager</h1>
                <small>All rights reserved</small>
            </div>
            <mat-card-header>
                <mat-card-title class="mb-0"><h4>{{formula.name}}</h4></mat-card-title>
                <mat-card-subtitle>{{formula.createdOn.seconds * 1000 | date}}</mat-card-subtitle>
                <div *ngIf="store.user" class="ml-auto">
                    <h5 *ngIf="formula.approved">Approved<span *ngIf="formula.approvedOn">: {{formula.approvedOn.seconds * 1000 | date}}</span></h5>
                    <button mat-raised-button color="primary" *ngIf="!formula.approved" (click)="approve(formula)">Approve</button>
                </div>
            </mat-card-header>
            <mat-card-content>
                <table class="w-100 mt-4 table">
                    <thead>
                    <tr>
                        <th style="width: 80%">Name</th>
                        <th class="text-right" style="width: 10%">Quantity</th>
                        <th class="text-right" style="width: 10%">Cost</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr *ngFor="let c of formula.components">
                        <td style="width: 80%">{{c.component?.name}}</td>
                        <td class="text-right" style="width: 10%">{{c.quantity | scale: formula.total : _newTotal | convertFromG: unit}} {{unit}}</td>
                        <td class="text-right" style="width: 10%">{{c.quantity | scale: formula.total : _newTotal / 1000 * c.component.price | currency}}</td>
                    </tbody>
                </table>
                <div class="col-12 d-lg-block mb-3" style="height: 4px; background:black; width: 100%;"></div>
                <div class="d-flex">
                    <div class="d-inline ml-auto">
                        <div class="d-inline-block mr-3">
                            <mat-form-field style="width: 75px">
                                <input matInput type="number" placeholder="Yield" [(ngModel)]="newTotal">
                            </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>
                        </div>
                        <div class="d-inline-block">
                            <mat-form-field id="totalCost" style="width: 100px">
                                <input matInput placeholder="Total Cost" [value]="cost() | currency" [readonly]="true" style="text-align: right;">
                            </mat-form-field>
                        </div>
                    </div>
                </div>
            </mat-card-content>
            <mat-card-actions class="d-print-none" style="overflow: hidden">
                <mat-divider></mat-divider>
                <button mat-button class="m-1 mt-3" onclick="window.print()">Print</button>
                <div *ngIf="store.user" class="float-right m-1 mt-3">
                    <button mat-button (click)="edit(formula)">Edit</button>
                    <button mat-button class="ml-2" color="warn" (click)="delete(formula)">Delete</button>
                </div>
            </mat-card-actions>
        </mat-card>
    </mat-drawer-content>
</mat-drawer-container>
