<form class="form-horizontal" role=form>
    <h2>Product Detail</h2>

    <div class="form-group">
        <label for="txtCode" class="col-md-2 control-label">Code</label>

        <div class="col-md-10">
            <input type="text" id="txtCode" class="form-control" disabled="disabled" ng-model="product.Code"/>
        </div>
    </div>
    <div class="form-group">
        <label for="txtName" class="col-md-2 control-label">Name</label>

        <div class="col-md-10">
            <input type="text" id="txtName" class="form-control" ng-model="product.Name"/>
        </div>
    </div>
    <div class="form-group">
        <label for="txtUnits" class="col-md-2 control-label">Units</label>

        <div class="col-md-10">
            <input type="text" id="txtUnits" class="form-control" ng-model="product.Units"/>
        </div>
    </div>
    <div class="form-group">
        <label for="ddlGroup" class="col-md-2 control-label">Group</label>

        <div class="col-md-10">
            <select id="ddlGroup" class="form-control" ng-model="product.ProductGroupID"
                    ng-options="l.ProductGroupID as l.Name for l in product_groups"> </select>

        </div>
    </div>
    <div class="form-group">
        <label for="txtPrice" class="col-md-2 control-label">Price</label>

        <div class="col-md-5">
            <input type="text" id="txtPrice" class="form-control" ng-model="product.Price"/>
        </div>
        <div class="col-md-5">
            <label class="checkbox-inline">
                <input type="checkbox" ng-model="product.HappyHour"> Happy Hour
            </label>
        </div>

    </div>
    <div class="form-group">
        <label for="ddlServiceTax" class="col-md-2 control-label">Service Tax</label>

        <div class="col-md-10">
            <select id="ddlServiceTax" class="form-control" ng-model="product.ServiceTaxID"
                    ng-options="t.TaxID as t.Name for t in service_tax"> </select>

        </div>
    </div>
    <div class="form-group">
        <label for="ddlVat" class="col-md-2 control-label">Vat</label>

        <div class="col-md-10">
            <select id="ddlVat" class="form-control" ng-model="product.VatID"
                    ng-options="l.TaxID as l.Name for l in vat"> </select>

        </div>
    </div>
    <div class="form-group">
        <label for="txtServiceCharge" class="col-md-2 control-label">Service Charge</label>

        <div class="col-md-5">
            <div class="input-group">
                <input type="number" id="txtServiceCharge" class="form-control" ng-model="product.ServiceCharge"/>
                <span class="input-group-addon">%</span>
            </div>
        </div>
        <div class="col-md-5">
            <label class="checkbox-inline">
                <input type="checkbox" ng-model="product.ScTaxable"> Is Taxable
            </label>

        </div>
    </div>
    <div class="form-group">
        <label for="txtOrder" class="col-md-2 control-label">Sort Order</label>

        <div class="col-md-10">
            <input type="text" id="txtOrder" class="form-control" ng-model="product.SoftOrdered"/>
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <button class="btn btn-primary" ng-click="save()">Save</button>
            <button class="btn btn-danger" ng-show="product.ProductID" ng-click="confirm()">Delete</button>
        </div>
    </div>
</form>
