<vn-crud-model
    vn-id="model"
    url="EntryObservations"
    fields="['id', 'entryFk', 'observationTypeFk', 'description']"
    link="{entryFk: $ctrl.$params.id}"
    data="observations"
    auto-load="true">
</vn-crud-model>
<vn-crud-model
    url="ObservationTypes"
    data="observationTypes"
    auto-load="true">
</vn-crud-model>
<vn-watcher
    vn-id="watcher"
    data="observations"
    form="form">
</vn-watcher>
<form name="form" ng-submit="$ctrl.onSubmit()" class="vn-w-md">
    <vn-card class="vn-pa-lg">
        <vn-one class="vn-mt-md">
            <vn-horizontal ng-repeat="observation in observations track by $index">
                <vn-autocomplete
                    ng-attr-disabled="observation.id ? true : false"
                    ng-model="observation.observationTypeFk"
                    data="observationTypes"
                    show-field="description"
                    label="Observation type"
                    vn-one
                    vn-focus>
                </vn-autocomplete>
                <vn-textfield
                    vn-two
                    class="vn-mr-lg"
                    label="Description"
                    ng-model="observation.description"
                    rule="EntryObservation">
                </vn-textfield>
                <vn-auto class="vn-pt-md">
                    <vn-icon-button
                        pointer
                        vn-tooltip="Remove note"
                        icon="delete"
                        ng-click="model.remove($index)">
                    </vn-icon-button>
                </vn-auto>
            </vn-horizontal>
        </vn-one>
        <vn-one>
            <vn-icon-button
                vn-tooltip="Add note"
                icon="add_circle"
                vn-bind="+"
                ng-if="observationTypes.length  > observations.length"
                ng-click="model.insert()">
            </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>