<div class="search-panel">
    <form class="vn-pa-lg" ng-submit="$ctrl.onSearch()">
        <vn-horizontal>
            <vn-textfield vn-focus
                vn-one
                label="General search"
                ng-model="filter.search"
                vn-focus>
            </vn-textfield>
        </vn-horizontal>
        <vn-horizontal>
            <vn-textfield
                vn-one
                label="Item id"
                ng-model="filter.itemId">
            </vn-textfield>
            <vn-autocomplete
                vn-one
                ng-model="filter.buyerId"
                url="TicketRequests/getItemTypeWorker"
                search-function="{firstName: $search}"
                show-field="nickname"
                value-field="id"
                label="Buyer">
            </vn-autocomplete>
        </vn-horizontal>
        <vn-horizontal>
            <vn-autocomplete vn-one
                ng-model="filter.typeId"
                url="ItemTypes"
                show-field="name"
                value-field="id"
                label="Type"
                fields="['categoryFk']"
                include="'category'">
                <tpl-item>
                    <div>{{name}}</div>
                    <div class="text-caption text-secondary">
                        {{category.name}}
                    </div>
                </tpl-item>
            </vn-autocomplete>
            <vn-autocomplete vn-one
                url="ItemCategories"
                label="Category"
                show-field="name"
                value-field="id"
                ng-model="filter.categoryId">
            </vn-autocomplete>
        </vn-horizontal>
        <vn-horizontal>
            <vn-autocomplete vn-one
                url="Campaigns/latest"
                label="Campaign"
                translate-fields="['code']"
                show-field="code"
                value-field="id"
                ng-model="filter.campaign"
                order="dated DESC"
                selection="$ctrl.campaignSelection"
                search-function="{dated: {like: '%'+ $search +'%'}}">
                <tpl-item>
                    {{code}} {{dated | date: 'yyyy'}}
                </tpl-item>
            </vn-autocomplete>
        </vn-horizontal>
        <vn-horizontal>
            <vn-date-picker
                vn-one
                label="From"
                ng-model="filter.from"
                on-change="$ctrl.onChangeDate(value)">
            </vn-date-picker>
            <vn-date-picker
                vn-one
                label="To"
                ng-model="filter.to"
                on-change="$ctrl.onChangeDate(value)">
            </vn-date-picker>
        </vn-horizontal>
        <vn-horizontal class="vn-mt-lg">
            <vn-submit label="Search"></vn-submit>
        </vn-horizontal>
    </form>
</div>