<div class="content-container" ng-controller="CreateCollateralController">
    <ul class="breadcrumb">
        <li><a href="#/products">{{'label.anchor.products' | translate}}</a></li>
        <li><a href="#/collaterals">{{'label.anchor.collaterals' | translate}}</a></li>
        <li class="active">{{'label.anchor.createcollateral' | translate}}</li>
    </ul>
    <div class="card">
        <div class="content">
        <div class="toolbar">
            <h4>{{ 'label.heading.createcollateral' | translate }}</h4>
        </div>
        <br/>
        <form name="createcollateralform" class="form-horizontal" ng-submit="submit()">
            <api-validate></api-validate>
            <fieldset>
                <div class="form-group">
                    <label class="control-label col-sm-2" for="name">{{ 'label.input.name' | translate }}<span
                            class="required">*</span></label>

                    <div class="col-sm-3">
                        <input id="name" name="name" type="text" class="form-control" ng-model="formData.name" required late-validate>
                    </div>
                    
                    <div class="col-sm-2">
                        <form-validate valattributeform="createcollateralform" valattribute="name"/>
                    </div>
                
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-2" for="quality">{{ 'label.input.type' | translate }}<span
                            class="required">*</span></label>

                    <div class="col-sm-3">
                        <input id="quality" name="quality" type="text" class="form-control" ng-model="formData.quality" required late-validate>
                    </div>
                    
                    <div class="col-sm-2">
                        <form-validate valattributeform="createcollateralform" valattribute="quality"/>
                    </div>
                
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-2" for="unitType">{{ 'label.input.unittype' | translate }}<span
                        class="required">*</span></label>

                    <div class="col-sm-3">
                        <input id="unitType" class="form-control" ng-model="formData.unitType" required late-validate>
                    </div>
                    <div class="col-sm-3">
                        <form-validate valattributeform="createcollateralform" valattribute="unitType"/>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-2" for="basePrice">{{'label.input.baseprice' | translate}}<span
                            class="required">*</span></label>

                    <div class="col-sm-3">
                        <input id="basePrice" name="basePrice" type="text" ng-model="formData.basePrice" class="form-control" number-format required late-Validate/>
                    </div>
                    <div class="col-sm-3">
                        <form-validate valattributeform="createcollateralform" valattribute="basePrice"/>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-2" for="pctToBase">{{'label.input.pcttobase' | translate}}<span
                            class="required">*</span></label>

                    <div class="col-sm-3">
                        <input id="pctToBase" name="pctToBase" type="text" ng-model="formData.pctToBase" class="form-control" number-format required late-Validate/>
                    </div>
                    <div class="col-sm-3">
                        <form-validate valattributeform="createcollateralform" valattribute="pctToBase"/>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-2" for="currency">{{ 'label.input.currency' | translate }}<span
                            class="required">*</span></label>

                    <div class="col-sm-3">
                        <select id="currency" name="currency" ng-model="formData.currency" class="form-control"
                                ng-options="currency.code as currency.name for currency in currencyOptions"
                                value="{{currency.code}}"></select>
                    </div>
                </div>
                <div class="col-md-offset-3">
                    <button id="cancel" type="reset" class="btn btn-default" ng-click="cancel()">{{ 'label.button.cancel' | translate
                        }}
                    </button>
                    <button id="save" type="submit" has-permission='CREATE_COLLATERAL_PRODUCT' class="btn btn-primary">{{ 'label.button.save' | translate }}</button>
                </div>

            </fieldset>
        </form> 
        </div>
    </div>
</div>