<div id="searchOptions" class="container-fluid p-0 mx-3">
    <div id="search_new" class="row m-0 p-l-2">
        <div class="col-12 col-sm-auto m-l-1 p-l-1">
            <label class="align-middle" for="category_select">Category: </label>
            <category (selected)="selectedCategory = $event"></category>
            <!--categorySelected($event)-->
            <!--<select class="form-control" id="category_select" [(ngModel)]="selectedCategory">-->
            <!--<option *ngFor="let item of categories | orderBy: ['-order', 'name']" [ngValue]="item">-->
            <!--{{item.name}}-->
            <!--</option>-->
            <!--</select>-->
        </div>
        <div class="col-12 col-sm-auto align-self-center">
            <label class="align-self-center">
                <input type="checkbox" name="search_only_near_by" [(ngModel)]="settings.onlyNearBy">
                Only near by
            </label>
            <label>
                <input type="checkbox" name="search_use_tags" [(ngModel)]="settings.withTags">
                Contains tags:
            </label>
        </div>
        <div class="col-12 col-sm-auto m-l-1 p-0">
            <ng2-completer id="gmap_complete" class="d-inline-block" [(ngModel)]="searchTerm" [datasource]="dataService" [minSearchLength]="3"
                           name="projectComplete" (keyup)="nameTyped($event)" clearUnselected="true"
                           (selected)="itemSelected($event)">
            </ng2-completer>
            <button type="button" class="btn btn-success p-1" (click)="searchGroups()">
                <i class="fa fa-search-plus fa-lg" aria-hidden="true"></i>
            </button>
        </div>
        <div class="col-0 col-sm-0 bg-inverse"></div>
    </div>
</div>
<div class="m-1" style="height: 70%">
    <div id="map"></div>
    <div id="legend"><h3>Legend</h3></div>
</div>
