<div class="search-panel">
    <vn-crud-model
        auto-load="true" 
        url="Warehouses" 
        data="warehouses">
    </vn-crud-model>
    <form id="manifold-form" ng-submit="$ctrl.onSearch()">
        <vn-horizontal class="vn-px-lg vn-pt-lg">
            <vn-date-picker
                vn-one
                label="Origin date"
                ng-model="filter.originDated"
                required="true">
            </vn-date-picker>
            <vn-date-picker
                vn-one
                label="Destination date"
                ng-model="filter.futureDated"
                required="true">
            </vn-date-picker>
        </vn-horizontal>
        <vn-horizontal class="vn-px-lg">
            <vn-textfield
                vn-one
                label="Max Liters"
                ng-model="filter.litersMax">
            </vn-textfield>
            <vn-textfield
                vn-one
                label="Max Lines"
                ng-model="filter.linesMax">
            </vn-textfield>
        </vn-horizontal>
        <vn-horizontal class="vn-px-lg">
            <vn-autocomplete vn-one
                data="$ctrl.itemPackingTypes"
                label="Origin IPT"
                value-field="code"
                show-field="description"
                ng-model="filter.ipt"
                info="IPT">
                <tpl-item>
                    {{description}}
                </tpl-item>
            </vn-autocomplete>
            <vn-autocomplete vn-one
                data="$ctrl.itemPackingTypes"
                label="Destination IPT"
                value-field="code"
                show-field="description"
                ng-model="filter.futureIpt"
                info="IPT">
                <tpl-item>
                    {{description}}
                </tpl-item>
            </vn-autocomplete>
        </vn-horizontal>
        <vn-horizontal class="vn-px-lg">
            <vn-autocomplete vn-one
                data="$ctrl.groupedStates"
                label="Origin Grouped State"
                value-field="code"
                show-field="name"
                ng-model="filter.state">
                <tpl-item>
                    {{name}}
                </tpl-item>
            </vn-autocomplete>
            <vn-autocomplete vn-one
                data="$ctrl.groupedStates"
                label="Destination Grouped State"
                value-field="code"
                show-field="name"
                ng-model="filter.futureState">
                <tpl-item>
                    {{name}}
                </tpl-item>
            </vn-autocomplete>
        </vn-horizontal>
        <vn-horizontal class="vn-px-lg">
            <vn-check
                vn-one
                label="With problems"
                ng-model="filter.problems"
                triple-state="true">
            </vn-check>
            <vn-autocomplete
                vn-one
                label="Warehouse"
                ng-model="filter.warehouseFk"
                data="warehouses"
                show-field="name"
                value-field="id"
                required="true">
            </vn-autocomplete>
        </vn-horizontal>
        <vn-horizontal class="vn-px-lg vn-pb-lg vn-mt-lg">
            <vn-submit label="Search"></vn-submit>
        </vn-horizontal>
    </form>
</div>