awx/awx/ui/client/src/shared/smart-search/smart-search.partial.html

<div class="SmartSearch row">
    <!-- input -->
    <div class="SmartSearch-bar" ng-class="{'SmartSearch-bar--fullWidth': searchBarFullWidth}">
        <div class="SmartSearch-searchTermContainer">
            <!-- string search input -->
            <form name="smartSearch" class="SmartSearch-form" aw-enter-key="addTerm(searchTerm)" novalidate>
                <input class="SmartSearch-input" ng-model="searchTerm" placeholder="{{searchPlaceholder}}"
                ng-disabled="disableSearch">
            </form>
            <div type="submit" class="SmartSearch-searchButton" ng-disabled="!searchTerm" ng-click="addTerm(searchTerm)">
                <i class="fa fa-search"></i>
            </div>
        </div>
        <div class="SmartSearch-keyToggle btn" ng-class="{'is-active': showKeyPane}" ng-click="toggleKeyPane()" translate>
            Key
        </div>
    </div>
    <!-- tags -->
    <div class="SmartSearch-tags" ng-show="!(searchTags | isEmpty)">
        <div class="SmartSearch-tagSection">
            <div class="SmartSearch-flexContainer">
                <div class="SmartSearch-tagContainer" ng-repeat="tag in searchTags track by $index">
                    <div class="SmartSearch-deleteContainer" ng-click="removeTerm($index)">
                        <i class="fa fa-times SmartSearch-tagDelete"></i>
                    </div>
                    <div class="SmartSearch-tag SmartSearch-tag--deletable">
                        <span class="SmartSearch-name">{{tag}}</span>
                    </div>
                </div>
                <a href class="SmartSearch-clearAll" ng-click="clearAllTerms()" translate>CLEAR ALL</a>
            </div>
        </div>
    </div>
    <!-- hint key -->
    <div class="SmartSearch-keyPane row" ng-repeat="model in models" ng-show="showKeyPane">
        <div class="SmartSearch-keyRow">
            <div class="SmartSearch-examples">
                <div class="SmartSearch-examples--title">
                    <b translate>EXAMPLES:</b>
                </div>
                <div class="SmartSearch-examples--search" ng-repeat="searchExample in model.searchExamples">{{searchExample}}</div>
            </div>
        </div>
        <div class="SmartSearch-keyRow">
            <b translate>FIELDS:</b> <span ng-repeat="(key,value) in model.base">{{ key }}<span ng-if="!$last">, </span></span>
        </div>
        <div class="SmartSearch-keyRow" ng-show="model.related && model.related.length > 0">
            <b translate>RELATED FIELDS:</b> <span ng-repeat="relation in model.related">{{ relation }}<span ng-if="!$last">, </span></span>
        </div>
        <div class="SmartSearch-keyRow">
            <b translate>ADDITIONAL INFORMATION:</b> <span translate>For additional information on advanced search search syntax please see the Ansible Tower<a href="http://docs.ansible.com/ansible-tower/3.1.0/html/userguide/search_sort.html" target="_blank"> documentation</a>.</span>
        </div>
    </div>
</div>