<mg-ajax path="/item/api/Items/new" options="vnPost"></mg-ajax>
<vn-watcher
    vn-id="watcher"
    data="$ctrl.item"
    form="form"
    save="post">
</vn-watcher>
<div class="content-block">
    <form name="form" ng-submit="$ctrl.onSubmit()" compact>
        <vn-card pad-large>
            <vn-horizontal>
                <vn-textfield 
                    vn-one 
                    label="Temporal name" 
                    field="$ctrl.item.provisionalName" 
                    vn-focus>
                </vn-textfield>
            </vn-horizontal>
            <vn-horizontal>
                <vn-autocomplete vn-one
                    url="/item/api/ItemTypes"
                    label="Type"
                    fields="['code', 'name']"
                    value-field="id"
                    field="$ctrl.item.typeFk"
                    search-function="{or: [{code: {like: $search +'%'}}, {name: {like: '%'+ $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"
                    search-function="{or: [{id: {like: $search +'%'}}, {description: {like: '%'+ $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>
    </form>
</div>