<form (submit)="addFilter()" role="form">
    <div class="form-group toolbar-pf-filter">
        <label class="sr-only" for="filter">{{selectedAttribute}}</label>
        <div class="input-group">
            <div class="input-group-btn">
                <button type="button" class="btn btn-default dropdown-toggle"
                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{selectedAttribute}} <span class="caret"></span></button>
                <ul class="dropdown-menu">
                    <li *ngFor="let attribute of filterableAttributes" [ngClass]="{'selected': attribute === selectedAttribute}">
                        <a (click)="selectAttribute(attribute)" href="javascript:void(0)">{{attribute}}</a>
                    </li>
                </ul>
            </div><!-- /btn-group -->
            <input type="text" class="form-control" id="filter" name="text" placeholder="Filter value..." [(ngModel)]="filterText">
        </div><!-- /input-group -->
    </div>
</form>
