<div class="search-panel">
    <vn-crud-model
        auto-load="true" 
        url="Agencies" 
        data="agencies">
    </vn-crud-model>
    <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"
                vn-focus>
            </vn-textfield>
        </vn-horizontal>
        <vn-horizontal class="vn-px-lg">
            <vn-autocomplete vn-one
                url="AgencyModes"
                label="Agency route"
                show-field="name"
                value-field="id"
                ng-model="filter.agencyModeFk">
            </vn-autocomplete>
            <vn-autocomplete vn-one
                data="agencies"
                label="Agency Agreement"
                show-field="name"
                value-field="id"
                ng-model="filter.agencyFk">
            </vn-autocomplete>
        </vn-horizontal>
        <section class="vn-px-md">
            <vn-horizontal class="manifold-panel vn-pa-md">
                <vn-date-picker
                    vn-one
                    label="From"
                    ng-model="filter.from"
                    on-change="$ctrl.from = value">
                </vn-date-picker>
                <vn-date-picker
                    vn-one
                    label="To"
                    ng-model="filter.to"
                    on-change="$ctrl.to = value">
                </vn-date-picker>
            </vn-horizontal>
        </section>
        <vn-horizontal class="vn-px-lg vn-pb-lg vn-mt-lg">
            <vn-submit label="Search"></vn-submit>
        </vn-horizontal>
    </form>
</div>