<div class="search-panel">
    <form ng-submit="$ctrl.onSearch()" id="manifold-form">
        <vn-horizontal class="vn-px-lg vn-pt-lg">
            <vn-textfield
                vn-one
                label="General search"
                ng-model="filter.search"
                info="Search travels by id"
                vn-focus>
            </vn-textfield>
        </vn-horizontal>
        <vn-horizontal class="vn-px-lg">
            <vn-textfield
                vn-one
                label="Reference"
                ng-model="filter.ref">
            </vn-textfield>
            <vn-textfield
                vn-one
                label="Total entries"
                ng-model="filter.totalEntries">
            </vn-textfield>
        </vn-horizontal>
        <vn-horizontal class="vn-px-lg">
            <vn-textfield
                vn-one
                label="Travel id"
                ng-model="filter.id">
            </vn-textfield>
            <vn-autocomplete vn-one
                label="Agency"
                ng-model="filter.agencyModeFk"
                url="AgencyModes"
                show-field="name"
                value-field="id">
            </vn-autocomplete>
        </vn-horizontal>
        <section class="vn-px-md">
            <vn-horizontal class="manifold-panel vn-pa-md">
                <vn-date-picker
                    vn-one
                    label="Shipped from"
                    ng-model="filter.shippedFrom"
                    on-change="$ctrl.shippedFrom = value">
                </vn-date-picker>
                <vn-date-picker
                    vn-one
                    label="Shipped to"
                    ng-model="filter.shippedTo"
                    on-change="$ctrl.shippedTo = value">
                </vn-date-picker>
                <vn-none class="or vn-px-md" translate>Or</vn-none>
                <vn-input-number
                    vn-one
                    min="0"
                    step="1"
                    label="Days onward"
                    ng-model="filter.scopeDays"
                    on-change="$ctrl.scopeDays = value"
                    display-controls="true">
                </vn-input-number>
                <vn-icon color-marginal
                    icon="info"
                    vn-tooltip="Cannot choose a range of dates and days onward at the same time">
                </vn-icon>
            </vn-horizontal>
        </section>
        <vn-horizontal class="vn-px-lg">
            <vn-date-picker
                vn-one
                label="Landed from"
                ng-model="filter.landedFrom">
            </vn-date-picker>
            <vn-date-picker
                vn-one
                label="Landed to"
                ng-model="filter.landedTo">
            </vn-date-picker>
        </vn-horizontal>
        <vn-horizontal class="vn-px-lg">
            <vn-autocomplete vn-one
                label="Warehouse Out"
                ng-model="filter.warehouseOutFk"
                url="Warehouses"
                show-field="name"
                value-field="id">
            </vn-autocomplete>
            <vn-autocomplete vn-one
                label="Warehouse In"
                ng-model="filter.warehouseInFk"
                url="Warehouses"
                show-field="name"
                value-field="id">
            </vn-autocomplete>
        </vn-horizontal>
        <vn-horizontal class="vn-px-lg">
            <vn-autocomplete vn-one
                label="Continent Out"
                ng-model="filter.continent"
                url="Continents"
                show-field="name"
                value-field="code">
            </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>