<form name="updatedocumentform" novalidate="" class="row form-horizontal" ng-controller="UpdateBankStatementController"
      rc-submit="submit()">
    <div>
        <ul class="breadcrumb">
            <li><a href="#/bankstatements">{{'label.view.viewbankstatement' | translate}}</a></li>
            <li class="active">{{'label.anchor.updatebankstatement' | translate}}</li>
        </ul>
    </div>
    <div class="form-horizontal well">
    <api-validate></api-validate>
    <fieldset>
        <legend>{{'label.heading.updatebankstatement' | 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="updatedocumentform" 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="bankData.id as bankData.name for bankData in banks" value="{{bankData.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="cpifFile">{{'label.input.selectcpiffile' | translate}}</label>
            <div class="col-sm-3">
                <input type="file" id="cpifFile" ng-required="false" ng-file-select="onCpifFileSelect($files)" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel">
            </div>
            <div class="col-sm-3">
                {{cpifFileName}}&nbsp;<a target="_blank" href="{{cpifFileURI}}"><i class="icon-cloud-download"></i></a>
            </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="onOrgFileSelect($files)" ng-required="false">
            </div>
            <div class="col-sm-3" ng-show="isOrgFilePresent">
                {{orgFileName}}&nbsp;<a target="_blank" href="{{orgFileURI}}"><i class="icon-cloud-download"></i></a>
            </div>
        </div>

        <div class="col-md-offset-3">
            <a id="cancel" href="#/bankstatements" class="btn btn-default">{{'label.button.cancel' | translate}}</a>
            <button id="save" type="submit" has-permission='UPDATE_BANKSTATEMENT' class="btn btn-primary">{{'label.button.update' | translate}}</button>
        </div>
    </fieldset>
    </div>
</form>
