<form ng-submit="$ctrl.onSubmit()">
    <vn-textfield
        class="dense standout"
        placeholder="{{::$ctrl.placeholder | translate}}"
        ng-model="$ctrl.searchString">
        <prepend>
            <vn-icon
                icon="search"
                ng-click="$ctrl.onSubmit()"
                pointer>
            </vn-icon>
            <div class="search-params">
                <span
                    ng-repeat="param in $ctrl.params"
                    class="search-param"
                    title="{{param.chip}}">
                    <vn-icon
                        icon="close"
                        ng-click="$ctrl.removeParam($index)">
                    </vn-icon>
                    {{param.chip}}
                </span>
            </div>
        </prepend>
        <append>
            <vn-icon
                ng-if="$ctrl.info"
                icon="info_outline"
                vn-tooltip="{{$ctrl.info}}"
                pointer>
            </vn-icon>
            <vn-icon
                ng-if="$ctrl.panel"
                ng-click="$ctrl.openPanel($event)"
                icon="arrow_drop_down"
                pointer>
            </vn-icon>
        </append>
    </vn-textfield>
</form>
<vn-popover
    vn-id="popover"
    on-close="$ctrl.onPopoverClose()">
</vn-popover>