 <form class="form-horizontal" role=form autocomplete="off">
    <h1>Recipe Detail</h1>

    <div layout="row">
        <md-autocomplete md-selected-item="recipe.Product" md-search-text="searchProd"
                         md-autofocus="recipe.RecipeItems.length === 0"
                         md-items="item in products(searchProd, {p: false})" md-item-text="item.Name" on-return="add()"
                         focus-on="foProduct" md-autoselect md-no-cache="true" md-floating-label="Recipe of" flex="50">
            <md-item-template>
                <span md-highlight-text="searchText">{{item.Name}}</span>
            </md-item-template>
            <md-not-found>
                No matches found.
            </md-not-found>
        </md-autocomplete>
        <md-input-container>
            <input type="text" ng-model="recipe.Quantity" placeholder="Quantity"/>
        </md-input-container>
        <md-input-container ng-show="recipe.Product.IsSold">
            <input type="text" ng-model="recipe.SalePrice" placeholder="Sale Price"/>
            <md-tooltip md-direction="top">
                Product's Sale Price {{recipe.Product.SalePrice}}, Recipe's Sale Price {{recipe.SalePrice}},
            </md-tooltip>
        </md-input-container>
        <md-input-container class="md-block">
            <input type="text" readonly value="{{recipe.Product.Units}}"/>
        </md-input-container>
        <md-input-container class="md-block">
            <input type="text" readonly placeholder="Cost Price / Costing"
                   value="{{costPrice | currency}} / {{costPrice * 100 / recipe.SalePrice | number:2}}%"/>
        </md-input-container>
    </div>
    <div layout="row" class="md-inline-form">
        <md-datepicker md-placeholder="Valid From" ng-model="recipe.ValidFrom"></md-datepicker>
        <md-datepicker md-placeholder="Valid To" ng-model="recipe.ValidTo"></md-datepicker>
    </div>
    <div layout="row">
        <md-autocomplete md-selected-item="product" md-search-text="searchIngredient" focus-on="foIngredient"
                         md-autofocus="recipe.RecipeItems.length > 0" md-items="item in products(searchIngredient, {})"
                         md-item-text="item.Name" on-return="add()"
                         focus-on="foProduct" md-autoselect md-no-cache="true" md-floating-label="Ingredient" flex="50">
            <md-item-template>
                <span md-highlight-text="searchText">{{item.Name}}</span>
            </md-item-template>
            <md-not-found>
                No matches found.
            </md-not-found>
        </md-autocomplete>

        <md-input-container flex="15">
            <input type="text" ng-model="quantity" placeholder="Quantity" on-return="add()"/>
        </md-input-container>
        <md-input-container flex="5">
            <input type="text" readonly value="{{product.FractionUnits}}"/>
        </md-input-container>
        <md-input-container>
            <input type="text" readonly
                   value="₹ {{product.Price}} / {{product.Units}} of {{product.Fraction}} {{product.FractionUnits}}"/>
            <md-tooltip md-direction="top">
                Yield {{product.ProductYield * 100 | number:2}}%
            </md-tooltip>
        </md-input-container>
        <md-input-container>
            <md-button class="md-raised" ng-click="add()">Add <i class="glyphicon glyphicon-plus-sign"></i></md-button>
        </md-input-container>
    </div>
    <table id="gvGrid" class="table table-condensed table-striped">
        <thead>
        <tr>
            <th>Ingredient</th>
            <th class="text-right">Quantity</th>
            <th>Units</th>
            <th class="text-right">Rate</th>
            <th class="text-right">Amount</th>
            <th></th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="item in recipe.RecipeItems">
            <td>{{item.Product.Name}}</td>
            <td class="text-right">{{item.Quantity | number:2}}</td>
            <td>{{item.Product.FractionUnits}}</td>
            <td class="text-right">₹ {{item.Price}} / {{item.Product.Units}} of {{item.Product.Fraction}}
                {{product.FractionUnits}}
                <md-tooltip md-direction="top">
                    Yield {{item.Product.ProductYield * 100 | number:2}}%
                </md-tooltip>
            </td>
            <td class="text-right">{{item.Quantity * (item.Price / (item.Product.Fraction *
                item.Product.ProductYield)) | currency}}
            </td>
            <td>
                <button type="button" class="close" ng-click="removeItem(item)">×</button>
            </td>
        </tr>
        </tbody>
    </table>
    <section layout="row" layout-sm="column" layout-align="center center">
        <md-button class="md-raised md-primary" ng-click="save()">Save</md-button>
        <md-button class="md-raised md-warn" ng-show="recipe.RecipeID" ng-click="confirm()">Delete</md-button>
    </section>
</form>
