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

    <div layout-gt-sm="row">
        <md-input-container flex-gt-sm>
            <input type="text" ng-model="product.Name" placeholder="Name"/>
        </md-input-container>
        <md-input-container flex-gt-sm>
            <input type="text" ng-model="product.Units" placeholder="Units"/>
        </md-input-container>
    </div>
    <div layout-gt-sm="row">
        <md-input-container flex-gt-sm>
            <input type="text" ng-model="product.Fraction" placeholder="Fraction"/>
        </md-input-container>
        <md-input-container flex-gt-sm>
            <input type="text" ng-model="product.FractionUnits" placeholder="Fraction Units"/>
        </md-input-container>
        <md-input-container flex-gt-sm>
            <input type="text" ng-model="product.ProductYield" placeholder="Yield"/>
        </md-input-container>
    </div>
    <div layout-gt-sm="row">
        <md-input-container flex-gt-sm>
            <label>{{product.IsPurchased ? 'Purchase Price' : 'Cost Price' }}</label>
            <input type="text" ng-model="product.Price"/>
        </md-input-container>
        <md-input-container flex-gt-sm ng-show="product.IsSold">
            <input type="text" ng-model="product.SalePrice"
                   placeholder="Sale Price"/>
        </md-input-container>
    </div>

    <div layout-gt-sm="row">
        <md-input-container flex="20">
            <md-checkbox ng-model="product.IsPurchased">
                Is Purchased?
            </md-checkbox>
        </md-input-container>
        <md-input-container flex="20">
            <md-checkbox ng-model="product.IsSold">
                Is Sold?
            </md-checkbox>
        </md-input-container>
        <md-input-container flex="20">
            <md-checkbox ng-model="product.IsActive">
                Is Active?
            </md-checkbox>
        </md-input-container>
    </div>
    <div layout-gt-sm="row">
        <md-input-container flex="50">
            <label>Product Group</label>
            <md-select ng-model="product.ProductGroup.ProductGroupID" placeholder="Product Group">
                <md-option ng-repeat="pg in productGroups" value="{{pg.ProductGroupID}}">{{pg.Name}}</md-option>
            </md-select>
        </md-input-container>
    </div>
    <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="product.ProductID" ng-click="confirm()">Delete</md-button>
    </section>
</form>
