<mg-ajax path="/item/api/Items" options="vnPost"></mg-ajax>
<vn-watcher
    vn-id="watcher"
    data="$ctrl.item"
    form="form"
    save="post">
</vn-watcher>
<form name="form" ng-submit="$ctrl.onSubmit()" margin-medium>
    <div style="max-width: 50em; margin: 0 auto;">
        <vn-card pad-large>
            <vn-title>New item</vn-title>
            <vn-horizontal>
                <vn-textfield vn-one label="Name" field="$ctrl.item.name" vn-focus></vn-textfield>
            </vn-horizontal>
            <vn-horizontal>
                <vn-autocomplete vn-one
                    url="/item/api/ItemTypes"
                    label="Type"
                    select-fields=["code","name"]
                    value-field="id"
                    field="$ctrl.item.typeFk"
                    where="{or: [{code: {regexp: 'search'}}, {name: {regexp: 'search'}}]}">
                    <tpl-item style="display: flex;">
                        <div style="width: 3em; padding-right: 1em;">{{::code}}</div>
                        <div>{{::name}}</div>
                    </tpl-item>
                </vn-autocomplete>
                <vn-autocomplete vn-one
                    url="/item/api/Intrastats"
                    label="Intrastat"
                    show-field="description"
                    value-field="id"
                    field="$ctrl.item.intrastatFk"
                    where="{or: [{id: {regexp: 'search'}}, {description: {regexp: 'search'}}]}">
                    <tpl-item style="display: flex;">
                        <div style="width: 6em; text-align: right; padding-right: 1em;">{{::id}}</div>
                        <div>{{::description}}</div>
                    </tpl-item>
                </vn-autocomplete>
            </vn-horizontal>
            <vn-horizontal>
                <vn-autocomplete vn-one
                    url="/item/api/Origins"
                    label="Origin"
                    show-field="name"
                    value-field="id"
                    field="$ctrl.item.originFk">
                </vn-autocomplete>
            </vn-horizontal>
        </vn-card>
        <vn-button-bar>
            <vn-submit label="Create"></vn-submit>
            <button
                class="mdl-button mdl-button--raised mdl-button--colored"
                translate
                ui-sref="item.index"
            >Cancel
            </button>
        </vn-button-bar>
    </div>
</form>