<form class="form-horizontal" role=form>
    <h2>Recipes
        <div class="form-group col-md-9 pull-right">
            <div class="col-md-10">
                <input type="text" class="form-control" placeholder="Search" ng-model="search">
            </div>
            <div class="col-md-2">
                <a href="/Recipe" class="btn btn-success btn-block">Add <i
                        class="glyphicon glyphicon-plus"></i></a>
            </div>
        </div>
    </h2>
    <div class="form-group">

        <div class="col-md-offset-2 col-md-2">
            <select class="form-control" ng-model="productTypeSelected">
                <option value="semi">Semi Products</option>
                <option value="menu">Menu Items</option>
                <option value="all">All</option>
            </select>
        </div>
        <div class="col-md-3">
            <select class="form-control" ng-model="showLatest">
                <option value="latest">Only Latest Recipes</option>
                <option value="all">All Recipes</option>
            </select>
        </div>
        <div class="col-md-3">
            <select class="form-control" ng-model="showSummary">
                <option value="no">Brief</option>
                <option value="yes">With Recipes</option>
            </select>
        </div>
    </div>
    <table class="table table-condensed table-bordered table-striped">
        <thead>
        <tr>
            <th>Name</th>
            <th ng-if="showSummary === 'no'">Date</th>
            <th class="text-right">Sale Price</th>
            <th class="text-right">Original Cost</th>
            <th class="text-right" ng-if="showSummary === 'no'">Current Cost</th>
            <th class="text-right">Original Costing</th>
            <th class="text-right" ng-if="showSummary === 'no'">Current Costing</th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat-start="item in display">
            <td><a ng-if="item.IsLatest" href="{{item.Url}}">{{item.Name}} ({{item.Units}})</a></td>
            <td ng-if="showSummary === 'no'">{{item.Date}}</td>
            <td class="text-right">{{item.IsSemi ? '' : (item.SalePrice | currency)}}</td>
            <td class="text-right">{{item.CostPrice | currency}}</td>
            <td class="text-right" ng-if="showSummary === 'no'">{{item.CurrentCostPrice | currency}}</td>
            <td class="text-right">{{item.IsSemi ? '' : (item.Costing | percent)}}</td>
            <td class="text-right" ng-if="showSummary === 'no'">{{item.IsSemi ? '' : (item.CurrentCosting | percent)}}</td>
        </tr>
        <tr ng-repeat-end ng-if="showSummary === 'yes'">
            <td colspan="7">
                <table class="table table-condensed table-striped">
                    <thead>
                    <tr>
                        <th>Ingredient</th>
                        <th class="text-right">Quantity</th>
                        <th class="text-right">Rate</th>
                        <th class="text-right">Amount</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr ng-repeat="sub_item in item.RecipeItems">
                        <td>{{sub_item.Name}}</td>
                        <td class="text-right">{{sub_item.Quantity | number:2}} {{sub_item.FractionUnits}}</td>
                        <td class="text-right">{{sub_item.Price | currency}}</td>
                        <td class="text-right">{{sub_item.Quantity * sub_item.Price | currency}}</td>
                    </tr>
                    </tbody>
                </table>
            </td>
        </tr>
        </tbody>
    </table>
</form>