<div>
    <vn-watcher
        vn-id="watcher"
        url="ClientUnpaids"
        data="$ctrl.clientUnpaid"
        id-value="$ctrl.$params.id"
        id-field="clientFk"
        form="form">
    </vn-watcher>
    <form
        name="form"
        ng-submit="$ctrl.onSubmit()"
        class="vn-w-md">
        <vn-card class="vn-pa-lg">
            <vn-vertical>
                <vn-check
                    label="Unpaid client"
                    ng-model="watcher.hasData"
                    on-change="$ctrl.setDefaultDate(watcher.hasData)">
                </vn-check>
            </vn-vertical>
            <vn-horizontal
                ng-if="watcher.hasData">
                <vn-date-picker
                    label="Date"
                    ng-model="$ctrl.clientUnpaid.dated"
                    vn-focus>
                </vn-date-picker>
                <vn-input-number
                    vn-focus
                    label="Amount"
                    ng-model="$ctrl.clientUnpaid.amount"
                    step="0.01"
                    required>
                </vn-input-number>
            </vn-horizontal>
        </vn-card>
        <vn-button-bar>
            <vn-submit
                disabled="!watcher.dataChanged()"
                label="Save">
            </vn-submit>
            <vn-button
                class="cancel"
                label="Undo changes"
                disabled="!watcher.dataChanged()"
                ng-click="watcher.loadOriginalData()">
            </vn-button>
        </vn-button-bar>
    </form>
</div>