<vn-crud-model
    vn-id="model"
    url="InvoiceInIntrastats"
    data="$ctrl.invoceInIntrastat"
    link="{invoiceInFk: $ctrl.$params.id}"
    auto-load="true"
    on-data-change="$ctrl.calculateTotals()">
</vn-crud-model>
<vn-crud-model
    auto-load="true"
    url="Countries"
    data="countries"
    order="country">
</vn-crud-model>
<vn-crud-model
    auto-load="true"
    url="Intrastats"
    data="intrastats"
    order="id">
</vn-crud-model>
<vn-watcher
    vn-id="watcher"
    data="$ctrl.invoceInIntrastat"
    form="form">
</vn-watcher>
<vn-card
    class="vn-mb-md vn-pa-lg vn-w-lg"
    style="text-align: right" 
    ng-if="$ctrl.invoceInIntrastat.length > 0">
    <vn-label-value label="Total amount" 
        value="{{$ctrl.amountTotal | currency: 'EUR':2}}">
    </vn-label-value>
    <vn-label-value label="Total net" 
        value="{{$ctrl.netTotal}}">
    </vn-label-value>
    <vn-label-value label="Total stems" 
    value="{{$ctrl.stemsTotal}}">
    </vn-label-value>
</vn-card>
<form name="form" ng-submit="$ctrl.onSubmit()">
    <vn-card class="vn-pa-lg">
        <vn-horizontal ng-repeat="intrastat in $ctrl.invoceInIntrastat">
            <vn-autocomplete vn-three
                label="Code"
                data="intrastats"
                ng-model="intrastat.intrastatFk"
                show-field="description"
                rule
                vn-focus>
                <tpl-item>{{id}}: {{description}}</tpl-item>
            </vn-autocomplete>
            <vn-input-number 
                label="Amount"
                ng-model="intrastat.amount"
                step="0.01"
                rule>
            </vn-input-number>
            <vn-input-number 
                label="Net"
                ng-model="intrastat.net"
                step="0.01"
                rule>    
            </vn-input-number>
            <vn-input-number 
                label="Stems"
                ng-model="intrastat.stems"
                rule>   
            </vn-input-number>
            <vn-autocomplete
                label="Country"
                data="countries"
                ng-model="intrastat.countryFk"
                show-field="code"
                rule>
            </vn-autocomplete>
            <vn-none>
                <vn-icon-button
                    vn-tooltip="Remove due day"
                    icon="delete"
                    ng-click="$ctrl.deleteIntrastat($index)"
                    tabindex="-1">
                </vn-icon-button>
            </vn-none>
        </vn-horizontal>
        <vn-one>
            <vn-icon-button
                vn-bind="+"
                vn-tooltip="Add due day"
                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>