<h1>Recipes</h1>
<div layout="row">
    <md-input-container flex="grow">
        <input type="text" ng-model="search" md-autofocus placeholder="Search: n:Name, t:Type, s:Start Date, f:Finish Date, c: Costing, cp: CostPrice, sp: SalePrice">
    </md-input-container>
    <md-input-container flex>
        <md-button ng-href="/Recipe">Add <i
                class="glyphicon glyphicon-plus"></i></md-button>
    </md-input-container>
</div>
<div layout="row">
    <div layout="column" flex>
        <label class="md-caption">Start Date</label>
        <md-datepicker md-placeholder="Start Date" ng-model="startDate"
                       ng-model-options="{ getterSetter: true }"></md-datepicker>
    </div>
    <div layout="column" flex>
        <label class="md-caption">Finish Date</label>
        <md-datepicker md-placeholder="Finish Date" ng-model="finishDate"
                       ng-model-options="{ getterSetter: true }"></md-datepicker>
    </div>
    <md-input-container flex="30">
        <label>Product Group</label>
        <md-select ng-model="productGroup" ng-model-options="{ getterSetter: true }" placeholder="Product Group">
            <md-option ng-repeat="pg in product_groups" value="{{pg}}">{{pg}}</md-option>
        </md-select>
    </md-input-container>
</div>
<table class="table table-condensed table-bordered table-striped">
    <thead>
    <tr>
        <th>Name</th>
        <th>Type</th>
        <th>Valid From</th>
        <th>Valid To</th>
        <th class="text-right">Cost Price</th>
        <th class="text-right">Sale Price</th>
        <th class="text-right">Costing</th>
    </tr>
    </thead>
    <tbody ng-repeat="items in recipes">
    <tr ng-repeat="item in items.Prices">
        <td ng-if="$first" rowspan="{{items.Prices.length}}">{{items.Name}}</td>
        <td ng-if="$first" rowspan="{{items.Prices.length}}">{{items.ProductGroup}}</td>
        <td><a href="{{item.Url}}">{{item.ValidFrom}}</a></td>
        <td>{{item.ValidTo}}</td>
        <td class="text-right">{{item.CostPrice | currency}}</td>
        <td class="text-right">{{item.SalePrice | currency}}</td>
        <td class="text-right">{{item.Costing | percent}}</td>
    </tr>
    </tbody>
</table>
