<div class="TagSearch row">
    <div ng-class="listConfig.searchSize || 'col-lg-4 col-md-8 col-sm-12 col-xs-12'">
        <div class="TagSearch-bar">
            <div class="TagSearch-typeDropdown"
                ng-click="toggleTypeDropdown()"
                ng-class="{'is-open': showTypeDropdown}"
                ng-cloak>
                <span class="TagSearch-typeDropdownName" ng-cloak>
                    {{ currentSearchType.label }}
                </span>
                <i class="TagSearch-selectDownIcon fa fa-angle-down"></i>
            </div>
            <div aw-click-off="showTypeDropdown" class="TagSearch-dropdownContainer
                TagSearch-dropdownContainer--searchTypes"
                ng-show="showTypeDropdown">
                <div class="TagSearch-dropdownItem"
                    ng-repeat="type in searchTypes track by $index"
                    ng-class="{'is-selected': (currentSearchType.value === type.value)}"
                    ng-click="setSearchType(type)">
                    {{ type.label }}
                </div>
            </div>
            <div class="TagSearch-searchTermContainer"
                ng-class="{'is-open': showCurrentSearchDropdown}">
                <input class="TagSearch-searchTermInput"
                    ng-show="currentSearchType.type === 'text'"
                    ng-model="newSearchTag"
                    placeholder="Search">
                <div class="TagSearch-searchButton"
                    ng-disabled="!newSearchTag"
                    ng-click="addTag()"
                    ng-show="currentSearchType.type === 'text'">
                    <i class="fa fa-search"></i>
                </div>

                <div class="TagSearch-searchTermSelect"
                    ng-show="currentSearchType.type === 'select'"
                    ng-click="toggleCurrentSearchDropdown()">
                    <div class="TagSearch-searchTermSelectPlaceholder">
                        Filter
                    </div>
                    <i class="TagSearch-selectDownIcon
                        fa fa-angle-down">
                    </i>
                </div>
                <div aw-click-off="showCurrentSearchDropdown"
                    class="TagSearch-dropdownContainer
                    TagSearch-dropdownContainer--typeOptions"
                    ng-show="showCurrentSearchDropdown &&
                        currentSearchType.type === 'select'">
                    <div class="TagSearch-dropdownItem"
                        ng-repeat="type in currentSearchType.typeOptions track by $index"
                        ng-click="addTag(type)">
                        {{ type.label }}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-8 col-md-12 col-sm-12 col-xs-12">
        <div class="TagSearch-tagSection">
            <div class="TagSearch-flexContainer">
                <div class="TagSearch-tagContainer"
                    ng-repeat="tag in currentSearchFilters track by $index">
                    <div class="TagSearch-tag TagSearch-tag--deletable"
                        <span class="TagSearch-name">
                            {{ tag.name }}
                        </span>
                    </div>
                    <div class="TagSearch-deleteContainer"
                        ng-click="deleteTag(tag)">
                        <i class="fa fa-times TagSearch-tagDelete"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
