<div class="search-panel">
    <form ng-submit="$ctrl.onSearch()">
        <vn-horizontal>
            <vn-textfield
                vn-one
                label="General search"
                ng-model="filter.search"
                info="Search entry by id or a suppliers by name or alias"
                vn-focus>
            </vn-textfield>
        </vn-horizontal>
        <vn-horizontal>
            <vn-textfield
                vn-one
                label="Reference"
                ng-model="filter.reference">
            </vn-textfield>
            <vn-textfield
                vn-one
                label="Invoice number"
                ng-model="filter.invoiceNumber">
            </vn-textfield>
        </vn-horizontal>
        <vn-horizontal>
        <vn-textfield
                vn-one
                label="Travel"
                ng-model="filter.travelFk">
            </vn-textfield>
        </vn-horizontal>
        <vn-horizontal>
            <vn-autocomplete
                vn-one
                label="Company"
                ng-model="filter.companyFk"
                url="Companies"
                show-field="code"
                value-field="id">
            </vn-autocomplete>
            <vn-autocomplete
                vn-one
                label="Currency"
                ng-model="filter.currencyFk"
                url="Currencies"
                show-field="name"
                value-field="id">
            </vn-autocomplete>
        </vn-horizontal>
        <vn-horizontal>
            <vn-autocomplete
                vn-one
                label="Supplier"
                ng-model="filter.supplierFk"
                url="Suppliers"
                fields="['name','nickname']"
                search-function="{or: [{nickname: {like: '%'+ $search +'%'}}, {name: {like: '%'+ $search +'%'}}]}"
                show-field="name"
                value-field="id">
                <tpl-item>{{name}}: {{nickname}}</tpl-item>
            </vn-autocomplete>
            <vn-date-picker
                vn-one
                label="Created"
                ng-model="filter.created">
            </vn-date-picker>   
        </vn-horizontal>
        <vn-horizontal>
            <vn-date-picker
                vn-one
                label="From"
                ng-model="filter.from">
            </vn-date-picker>
            <vn-date-picker
                vn-one
                label="To"
                ng-model="filter.to">
            </vn-date-picker>
        </vn-horizontal>
        <vn-horizontal>
            <vn-check
                vn-one
                label="Booked"
                ng-model="filter.isBooked">
            </vn-check>
            <vn-check
                vn-one
                label="Confirmed"
                ng-model="filter.isConfirmed">
            </vn-check>
            <vn-check
                vn-one
                label="Ordered"
                ng-model="filter.isOrdered">
            </vn-check>
        </vn-horizontal>
        <vn-horizontal class="vn-mt-lg">
            <vn-submit label="Search"></vn-submit>
        </vn-horizontal>
    </form>
</div>