<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 ticket by id or alias"
                vn-focus>
            </vn-textfield>
        </vn-horizontal>
        <vn-horizontal class="vn-px-lg">
            <vn-textfield
                vn-one
                label="Client id"
                ng-model="filter.clientFk">
            </vn-textfield>
            <vn-textfield
                vn-one
                label="Order id"
                ng-model="filter.orderFk">
            </vn-textfield>
        </vn-horizontal>
        <vn-horizontal class="vn-px-lg">
            <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-horizontal>
        <vn-horizontal class="vn-px-lg">
            <vn-textfield
                vn-one
                label="Nickname"
                ng-model="filter.nickname">
            </vn-textfield>
            <vn-autocomplete
                vn-one
                ng-model="filter.salesPersonFk"
                url="Workers/activeWithInheritedRole"
                search-function="{firstName: $search}"
                value-field="id"
                where="{role: 'employee'}"
                label="Sales person">
                <tpl-item>{{firstName}} {{name}}</tpl-item>
            </vn-autocomplete>
            <vn-textfield
                vn-one
                label="Invoice"
                ng-model="filter.refFk">
            </vn-textfield>
        </vn-horizontal>
        <vn-horizontal class="vn-px-lg">
            <vn-autocomplete
                vn-one
                label="Agency"
                ng-model="filter.agencyModeFk"
                url="AgencyModes/isActive">
            </vn-autocomplete>
            <vn-autocomplete
                vn-one
                label="State"
                ng-model="filter.stateFk"
                url="States">
            </vn-autocomplete>
            <vn-autocomplete vn-one
                data="$ctrl.groupedStates"
                label="Grouped States"
                value-field="alertLevel"
                show-field="name"
                ng-model="filter.alertLevel">
                <tpl-item>
                    {{name}}
                </tpl-item>
            </vn-autocomplete>
        </vn-horizontal>
        <vn-horizontal class="vn-px-lg">
            <vn-autocomplete
                vn-one
                label="Warehouse"
                ng-model="filter.warehouseFk"
                url="Warehouses">
            </vn-autocomplete>
            <vn-autocomplete
                vn-one
                label="Province"
                ng-model="filter.provinceFk"
                url="Provinces">
            </vn-autocomplete>
        </vn-horizontal>
        <vn-horizontal class="vn-px-lg">
            <vn-check
                vn-one
                label="My team"
                ng-model="filter.myTeam"
                triple-state="true">
            </vn-check>
            <vn-check
                vn-one
                label="With problems"
                ng-model="filter.problems"
                triple-state="true">
            </vn-check>
            <vn-check
                vn-one
                label="Pending"
                ng-model="filter.pending"
                triple-state="true">
            </vn-check>
        </vn-horizontal>
        <vn-horizontal class="vn-px-lg vn-pb-lg vn-mt-lg">
            <vn-submit label="Search"></vn-submit>
        </vn-horizontal>
    </form>
</div>