<h2>Products</h2>
<div layout="row">
    <md-input-container flex="grow">
        <input type="text" ng-model="search" md-autofocus
               placeholder="Search: n:Name, u:Units, s:Sold, p:Purchased, a:Active, t:Type and e:true for extended properties">
    </md-input-container>
    <md-input-container flex>
        <md-button ng-href="/Product">Add <i
                class="glyphicon glyphicon-plus"></i></md-button>
    </md-input-container>
</div>
    <div layout="row">
        <md-input-container flex="20">
            <label>Is Purchased?</label>
            <md-select ng-model="isPurchased" ng-model-options="{ getterSetter: true }" placeholder="Is Purchased?">
                <md-option value="null">All</md-option>
                <md-option value="true">Yes</md-option>
                <md-option value="false">No</md-option>
            </md-select>
        </md-input-container>
        <md-input-container flex="20">
            <label>Is Sold?</label>
            <md-select ng-model="isSold" ng-model-options="{ getterSetter: true }" placeholder="Is Sold?">
                <md-option value="null">All</md-option>
                <md-option value="true">Yes</md-option>
                <md-option value="false">No</md-option>
            </md-select>
        </md-input-container>
        <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" keypress="shortcuts">
    <thead>
    <tr>
        <th class="text-right">Code</th>
        <th>Name</th>
        <th class="text-right">Price</th>
        <th ng-if="showExtended" class="text-right">Yield</th>
        <th>Type</th>
        <th>Details</th>
    </tr>
    </thead>
    <tbody>
    <tr id="{{$index}}" ng-repeat="item in products" ng-class="{warning:$index==selected}"
        ng-click="setSelected($index)">
        <td class="text-right">{{item.Code}}</td>
        <td><a href="{{item.Url}}">{{item.Name}} ({{showExtended ? item.Fraction + ' ' + item.FractionUnits + ' = 1 ' :
            ''}}{{item.Units}})</a></td>
        <td class="text-right">{{item.CostPrice | currency}}</td>
        <td ng-if="showExtended" class="text-right">{{item.ProductYield * 100 | number:2}}%</td>
        <td>{{item.ProductGroup}}</td>
        <td>
            <div layout="row">
                <div flex>
                    <md-icon>
                        {{ item.IsPurchased ? "shopping_cart" : "remove_shopping_cart" }}
                    </md-icon>
                    <b>{{ item.IsPurchased ? "Purchased" : "Made" }}</b>
                </div>
                <div flex>
                    <md-icon>
                        {{ item.IsSold ? "restaurant_menu" : "import_contacts" }}
                    </md-icon>
                    <b>{{ item.IsSold ? "Sold" : "Used" }}</b>
                </div>
                <div flex>
                    <md-icon>
                        {{ item.IsActive ? "visibility" : "visibility_off" }}
                    </md-icon>
                    <b>{{ item.IsActive ? "Active" : "Deactivated" }}</b>
                </div>
            </div>
        </td>
    </tr>
    </tbody>
</table>
