<div class="search-panel">
<form ng-submit="$ctrl.onSearch()">
    <vn-horizontal>
        <vn-textfield
            vn-one
            label="General search"
            model="filter.search"
            info="Search client by id or name"
            vn-focus>
        </vn-textfield>
    </vn-horizontal>
    <vn-horizontal>
        <vn-textfield
            vn-one
            label="Client id"
            model="filter.id">
        </vn-textfield>
        <vn-textfield
            vn-one
            label="Tax number"
            model="filter.fi">
        </vn-textfield>
    </vn-horizontal>
    <vn-horizontal>
        <vn-textfield
            vn-one label="Name"
            model="filter.name">
        </vn-textfield>
        <vn-autocomplete
            vn-one
            field="filter.salesPersonFk"
            url="/client/api/Clients/activeWorkersWithRole"
            search-function="{firstName: $search}"
            show-field="firstName"
            value-field="id"
            where="{role: 'salesPerson'}"
            label="Salesperson">
            <tpl-item>{{firstName}} {{name}}</tpl-item>
        </vn-autocomplete>
    </vn-horizontal>
    <vn-horizontal>
        <vn-textfield
            vn-one
            label="Social name"
            model="filter.socialName">
        </vn-textfield>
    </vn-horizontal>
    <vn-horizontal>
        <vn-textfield
            vn-one
            label="Town/City"
            model="filter.city">
        </vn-textfield>
        <vn-textfield
            vn-one
            label="Postcode"
            model="filter.postcode">
        </vn-textfield>
    </vn-horizontal>
    <vn-horizontal>
        <vn-textfield
            vn-one
            label="Email"
            model="filter.email">
        </vn-textfield>
        <vn-textfield
            vn-one
            label="Phone"
            model="filter.phone">
        </vn-textfield>
    </vn-horizontal>
    <vn-horizontal margin-large-top>
        <vn-submit label="Search"></vn-submit>
    </vn-horizontal>
</form>
</div>