<form name="documentform" novalidate="" class="row form-horizontal" ng-controller="UploadBankStatementController"
      rc-submit="submit()">
    <div>
        <ul class="breadcrumb">
            <li><a href="#/bankstatements">{{'label.view.viewbankstatement' | translate}}</a></li>
             <li class="active">{{'label.anchor.uploadbankstatement' | translate}}</li>
        </ul>
    </div>
    <div class="form-horizontal well">
    <api-validate></api-validate>
    <fieldset>
        <legend>{{'label.heading.uploadbankstatement' | translate}}</legend>
        <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 ng-autofocus="true" type="text" id="name" name="name" ng-model="formData.name" class="form-control" required
                       late-Validate/>
            </div>
            <div class="col-sm-3">
                <form-validate valattributeform="documentform" valattribute="name"/>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-sm-2">{{'label.input.selectbank' | translate}}</label>

            <div class="col-sm-3">
                <div >
                    <select chosen="banks" id="bank" ng-model="formData.bank"  class="form-control"
                            ng-options="bank.id as bank.name for bank in banks" value="{{bank.id}}"
                            name="bank">
                        <option value="" style="display:none;">--{{'label.menu.selectbank' | translate}}--</option>
                    </select>
                </div>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-sm-2">{{'label.input.description' | translate}}</label>

            <div class="col-sm-3">
                <textarea rows="2" ng-model="formData.description" class="form-control"></textarea>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-sm-2" for="file">{{'label.input.selectcpiffile' | translate}}<span
                    class="required">*</span></label>

            <div class="col-sm-3">
                <input type="file" id="file" multiple="multiple" ng-file-select="onCIFFileSelect($files)"
                       accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
                       ng-required="true"/>
            </div>
            <div class="col-sm-3">
                <span ng-show="isCPIFNotSlected && rc.documentform.attempted" class="ng-scope"><small class="error ng-binding">Required Field</small></span>
            </div>
            <div class="col-sm-1">
                <form-validate valattributeform="documentform" valattribute="file"/>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-2" for="orgFile">{{'label.input.selectoriginalfile' | translate}}</label>
            <div class="col-sm-3">
                <input type="file" id="orgFile" ng-file-select="onFileSelect($files)" ng-required="false">
            </div>
        </div>

        <div class="col-md-offset-3">
            <button id="save" type="submit" has-permission='CREATE_BANKSTATEMENT' class="btn btn-primary">{{'label.button.save' | translate}}</button>
        </div>
    </fieldset>
    </div>
</form>
