<vn-crud-model
    vn-id="model"
    url="SupplierAccounts"
    fields="['id', 'supplierFk', 'iban', 'bankEntityFk', 'beneficiary']"
    link="{supplierFk: $ctrl.$params.id}"
    include="$ctrl.include"
    data="$ctrl.supplierAccounts"
    auto-load="true">
</vn-crud-model>
<vn-watcher
    vn-id="watcher"
    data="$ctrl.supplierAccounts"
    form="form">
</vn-watcher>
<form name="form" ng-submit="$ctrl.onSubmit()" class="vn-w-lg">
    <vn-card class="vn-pa-lg">
        <vn-horizontal ng-repeat="supplierAccount in $ctrl.supplierAccounts">
            <vn-textfield
                label="Iban"
                ng-model="supplierAccount.iban"
                on-change="supplierAccount.bankEntityFk = supplierAccount.iban.slice(4,8)"
                rule>
            </vn-textfield>
            <vn-autocomplete
                label="Bank entity"
                ng-model="supplierAccount.bankEntityFk"
                url="BankEntities"
                fields="['name']"
                initial-data="supplierAccount.bankEntityFk"
                search-function="{or: [{bic: {like: $search +'%'}}, {name: {like: '%'+ $search +'%'}}]}"
                value-field="id"
                show-field="bic"
                rule>
                <tpl-item>{{bic}} {{name}}</tpl-item>
                <append>
                    <vn-icon-button
                        vn-auto
                        icon="add_circle"
                        vn-click-stop="bankEntity.show({index: $index})"
                        vn-tooltip="New bank entity">
                    </vn-icon-button>
                </append>
            </vn-autocomplete>
            <vn-textfield
                label="Beneficiary"
                ng-model="supplierAccount.beneficiary"
                info="Beneficiary information">
            </vn-textfield>
            <vn-none>
                <vn-icon-button
                    vn-tooltip="Remove account"
                    icon="delete"
                    ng-click="model.remove($index)"
                    tabindex="-1">
                </vn-icon-button>
            </vn-none>
        </vn-horizontal>
        <vn-one>
            <vn-icon-button
                vn-bind="+"
                vn-tooltip="Add account"
                icon="add_circle"
                ng-click="$ctrl.add()">
            </vn-icon-button>
        </vn-one>
    </vn-card>
    <vn-button-bar>
        <vn-submit
            disabled="!watcher.dataChanged()"
            label="Save">
        </vn-submit>
    </vn-button-bar>
</form>

<!-- New bankentity dialog -->
<vn-new-bank-entity
    vn-id="bankEntity"
    on-accept="$ctrl.onAccept($data)">
</vn-new-bank-entity>

<vn-confirm 
    class="edit"
    vn-id="payMethodToTransfer"
    on-accept="$ctrl.setWireTransfer()"
    message="Do you want to change the pay method to wire transfer?">
</vn-confirm>