<div class="col-md-12" ng-controller="EditProductCollateralMappingController">
    <ul class="breadcrumb">
        <li><a href="#/products">{{'label.anchor.products' | translate}}</a></li>
        <li class="active">{{'label.view.editproductcollateralsmapping' | translate}}</li>
    </ul>
    <form name="editproductcollateralsmapping" novalidate="" class="col-md-12 form-horizontal well" rc-submit="submit()">
        <api-validate></api-validate>
        <fieldset>
            <legend>{{'label.heading.editproductcollateralsmapping' | translate}}</legend>
            <div class="form-group">
                <label class="control-label col-sm-2">
                    {{'label.input.productname' | translate}} <span class="required">*</span>
                </label>

                <div class="col-sm-3">
                    <div >
                        <select chosen="loanProducts" id="loanProductId" ng-model="formData.loanProductId"  class="form-control"
                                ng-options="product.id as product.name for product in loanProducts" value="{{product.id}}"
                                ng-change="changeOffice(formData.loanProductId)" name="loanProductId" required late-Validate>
                                <option value="" style="display:none;">--{{'label.menu.selectloanproduct' | translate}}--</option>
                        </select>
                    </div>
                </div>

                <div class="col-sm-3" >
                    <form-validate valattributeform="editproductcollateralsmapping" valattribute="loanProductId"/>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-2">
                    {{'label.input.allowedcollateral' | translate}} <span class="required">*</span>
                </label>

                <div class="col-sm-3">
                    <div>
                        <select chosen="collaterals" id="collateralId" ng-model="formData.collateralId"  class="form-control"
                                ng-options="collateral.id as collateral.name for collateral in collaterals" value="{{collateral.id}}"
                                ng-change="changeOffice(formData.collateralId)"  name="collateralId" required late-Validate>
                            <option value="" style="display:none;">--{{'label.menu.selectcollateral' | translate}}--</option>
                        </select>
                    </div>
                </div>

                <div class="col-sm-3" >
                    <form-validate valattributeform="editproductcollateralsmapping" valattribute="collateralId"/>
                </div>
            </div>
            <div class="col-md-offset-5">
                <a id="cancel" ng-href="{{cancel}}" class="btn btn-default" ng-click="cancel()">{{'label.button.cancel' | translate}}</a>
                <button id="save" type="submit" class="btn btn-primary"  ng-hide="blockUI" has-permission='UPDATE_PRODUCTCOLLATERALSMAPPING'>{{'label.button.update' | translate}}</button>
                <button class="btn btn-info" ng-show="blockUI"><strong>{{'label.button.processing' | translate}}</strong></button>
            </div>
        </fieldset>
    </form>
</div>