<vn-crud-model
    vn-id="model"
    url="SupplierContacts"
    link="{supplierFk: $ctrl.$params.id}"
    data="contacts"
    auto-load="true">
</vn-crud-model>
<vn-watcher
    vn-id="watcher"
    data="contacts"
    form="form">
</vn-watcher>
<form name="form" ng-submit="$ctrl.onSubmit()" class="vn-w-lg">
    <vn-card class="vn-pa-lg">
        <div ng-repeat="contact in contacts" class="contact">
            <vn-vertical>
                <vn-horizontal>
                    <vn-textfield
                        vn-one
                        label="Name"
                        ng-model="contact.name"
                        rule="SupplierContact">
                    </vn-textfield>
                    <vn-textfield
                        vn-one
                        label="Phone"
                        ng-model="contact.phone"
                        rule="SupplierContact">
                    </vn-textfield>
                    <vn-textfield
                        vn-one
                        label="Mobile"
                        ng-model="contact.mobile"
                        rule="SupplierContact">
                    </vn-textfield>
                    <vn-textfield
                        vn-two
                        label="Email"
                        ng-model="contact.email"
                        rule="SupplierContact">
                    </vn-textfield>
                </vn-horizontal>
                <vn-horizontal>  
                    <vn-textfield
                        vn-one
                        label="Notes"
                        ng-model="contact.observation"
                        rule="SupplierContact"
                        title="{{contact.observation}}">
                    </vn-textfield>
                    <vn-none>
                        <vn-icon-button
                            vn-tooltip="Remove contact"
                            icon="delete"
                            tabindex="-1"
                            ng-click="model.remove($index)">
                        </vn-icon-button>
                    </vn-none>
                </vn-horizontal>
            </vn-vertical>
        </div>
        <vn-one>
            <vn-icon-button
                vn-bind="+"
                vn-tooltip="Add contact"
                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>
        <!-- # #2680 Undo changes button bugs -->
        <!-- <vn-button
            class="cancel"
            label="Undo changes"
            disabled="!watcher.dataChanged()"
            ng-click="watcher.loadOriginalData()">
        </vn-button> -->
    </vn-button-bar>
</form>