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

                    <div class="col-sm-3">
                        <select id="collateralTypeId" ng-model="formData.collateralTypeId" class="form-control"
                                ng-options="collateralType.id as collateralType.name for collateralType in collateralTypes"
                                value="{{collateralType.id}}"></select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-2" for="value">{{ 'label.input.value' | translate }}<span
                            class="required">*</span></label>

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

                    <div class="col-sm-3">
                        <textarea id="description" class="form-control" ng-model="formData.description" rows="4" cols=""></textarea>
                    </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' class="btn btn-primary">{{ 'label.button.save' | translate }}</button>
                </div>

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