<vn-side-menu side="right">
    <vn-horizontal class="input">
        <vn-textfield
            label="General search"
            info="Search travels by id"
            ng-model="$ctrl.search"
            ng-keydown="$ctrl.onKeyPress($event, 'search')">
        </vn-textfield>
    </vn-horizontal>
    <vn-horizontal class="input horizontal">
        <vn-autocomplete
            vn-id="agency"
            label="Agency"
            ng-model="$ctrl.filter.agencyModeFk"
            data="$ctrl.agencyModes"
            show-field="name"
            value-field="id"
            on-change="$ctrl.applyFilters()">
        </vn-autocomplete>
    </vn-horizontal>
    <vn-horizontal class="input horizontal">
        <vn-autocomplete
            vn-id="warehouseOut"
            label="Warehouse Out"
            ng-model="$ctrl.filter.warehouseOutFk"
            data="$ctrl.warehouses"
            show-field="name"
            value-field="id"
            on-change="$ctrl.applyFilters()">
        </vn-autocomplete>
        <vn-autocomplete
            vn-id="warehouseIn"
            label="Warehouse In"
            ng-model="$ctrl.filter.warehouseInFk"
            data="$ctrl.warehouses"
            show-field="name"
            value-field="id"
            on-change="$ctrl.applyFilters()">
        </vn-autocomplete>
    </vn-horizontal>
    <vn-horizontal class="input horizontal">
        <vn-input-number
            min="0"
            step="1"
            label="Days onward"
            ng-model="$ctrl.filter.scopeDays"
            on-change="$ctrl.applyFilters()"
            display-controls="true"
            info="Cannot choose a range of dates and days onward at the same time">
        </vn-input-number>
    </vn-horizontal>
    <vn-horizontal class="input horizontal">
        <vn-date-picker
            label="Landed from"
            ng-model="$ctrl.filter.landedFrom"
            on-change="$ctrl.applyFilters()">
        </vn-date-picker>
        <vn-date-picker
            label="Landed to"
            ng-model="$ctrl.filter.landedTo"
            on-change="$ctrl.applyFilters()">
        </vn-date-picker>
    </vn-horizontal>
    <vn-horizontal class="input horizontal">
        <vn-autocomplete
            vn-id="continent"
            label="Continent Out"
            ng-model="$ctrl.filter.continent"
            data="$ctrl.continents"
            show-field="name"
            value-field="code"
            on-change="$ctrl.applyFilters()">
        </vn-autocomplete>
        <vn-input-number
            min="0"
            label="Total entries"
            ng-model="$ctrl.totalEntries"
            ng-keydown="$ctrl.onKeyPress($event, 'totalEntries')">
        </vn-input-number>
    </vn-horizontal>
    <div class="chips">
        <vn-chip
            ng-if="$ctrl.filter.search"
            removable="true"
            on-remove="$ctrl.removeParamFilter('search')"
            class="colored">
            <span>Id/{{$ctrl.$t('Reference')}}: {{$ctrl.filter.search}}</span>
        </vn-chip>
        <vn-chip
            ng-if="agency.selection"
            removable="true"
            on-remove="$ctrl.removeParamFilter('agencyModeFk')"
            class="colored">
            <span>{{$ctrl.$t('Agency')}}: {{agency.selection.name}}</span>
        </vn-chip>
        <vn-chip
            ng-if="warehouseOut.selection"
            removable="true"
            on-remove="$ctrl.removeParamFilter('warehouseOutFk')"
            class="colored">
            <span>{{$ctrl.$t('Warehouse Out')}}: {{warehouseOut.selection.name}}</span>
        </vn-chip>
        <vn-chip
            ng-if="warehouseIn.selection"
            removable="true"
            on-remove="$ctrl.removeParamFilter('warehouseInFk')"
            class="colored">
            <span>{{$ctrl.$t('Warehouse In')}}: {{warehouseIn.selection.name}}</span>
        </vn-chip>
        <vn-chip
            ng-if="$ctrl.filter.scopeDays"
            removable="true"
            on-remove="$ctrl.removeParamFilter('scopeDays')"
            class="colored">
            <span>{{$ctrl.$t('Days onward')}}: {{$ctrl.filter.scopeDays}}</span>
        </vn-chip>
        <vn-chip
            ng-if="$ctrl.filter.landedFrom"
            removable="true"
            on-remove="$ctrl.removeParamFilter('landedFrom')"
            class="colored">
            <span>{{$ctrl.$t('Landed from')}}: {{$ctrl.filter.landedFrom | date:'dd/MM/yyyy'}}</span>
        </vn-chip>
        <vn-chip
            ng-if="$ctrl.filter.landedTo"
            removable="true"
            on-remove="$ctrl.removeParamFilter('landedTo')"
            class="colored">
            <span>{{$ctrl.$t('Landed to')}}: {{$ctrl.filter.landedTo | date:'dd/MM/yyyy'}}</span>
        </vn-chip>
        <vn-chip
            ng-if="continent.selection"
            removable="true"
            on-remove="$ctrl.removeParamFilter('continent')"
            class="colored">
            <span>{{$ctrl.$t('Continent Out')}}: {{continent.selection.name}}</span>
        </vn-chip>
        <vn-chip
            ng-if="$ctrl.filter.totalEntries"
            removable="true"
            on-remove="$ctrl.removeParamFilter('totalEntries')"
            class="colored">
            <span>{{$ctrl.$t('Total entries')}}: {{$ctrl.filter.totalEntries}}</span>
        </vn-chip>
    </div>
</vn-side-menu>