<div class="search-panel">
    <form id="manifold-form" ng-submit="$ctrl.onSearch()">
        <vn-horizontal class="vn-px-lg vn-pt-lg">
            <vn-textfield
                vn-one
                label="General search"
                ng-model="filter.search"
                info="Search routes by id"
                vn-focus>
            </vn-textfield>
        </vn-horizontal>
        <section class="vn-px-md">
            <vn-horizontal class="manifold-panel vn-pa-md">
                <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>
        </section>
        <vn-horizontal class="vn-px-lg">
            <vn-textfield
                vn-one
                label="Tractor plate"
                ng-model="filter.tractorPlate">
            </vn-textfield>
            <vn-textfield
                vn-one
                label="Trailer plate"
                ng-model="filter.trailerPlate">
            </vn-textfield>
        </vn-horizontal>
        <vn-horizontal class="vn-px-lg">
            <vn-autocomplete
                vn-one
                ng-model="filter.supplierFk"
                url="Suppliers"
                show-field="nickname"
                search-function="{or: [{id: $search}, {nickname: {like: '%'+ $search +'%'}}]}"
                value-field="id"
                order="nickname"
                label="Carrier">
                <tpl-item>
                    {{::id}} - {{::nickname}}
                </tpl-item>
            </vn-autocomplete>
            <vn-input-number
                vn-one
                label="Price"
                ng-model="filter.price">
            </vn-input-number>
        </vn-horizontal>
        <vn-horizontal class="vn-px-lg">
            <vn-textfield
                vn-one
                label="Driver name"
                ng-model="filter.driverName">
            </vn-textfield>
             <vn-textfield
                vn-one
                label="Phone"
                ng-model="filter.phone">
            </vn-textfield>
        </vn-horizontal>
        <vn-horizontal class="vn-px-lg vn-pb-lg vn-mt-lg">
            <vn-submit label="Search"></vn-submit>
        </vn-horizontal>
    </form>
</div>