<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="addTerms(searchTerm)" novalidate>
                <input class="SmartSearch-input" ng-model="searchTerm" placeholder="{{searchPlaceholder}}"
                ng-disabled="disableSearch">
            </form>
            <div type="submit" class="SmartSearch-searchButton" ng-class="{'SmartSearch-searchButton--disabled': !searchTerm || searchTerm === ''}" ng-click="addTerms(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">
                    <at-tag tag="tag" remove-tag="removeTerm($index)"></at-tag>
                </div>
                <div class="SmartSearch-clearAll-container">
                    <a href class="SmartSearch-clearAll" ng-click="clearAllTerms()" translate>CLEAR ALL</a>
                </div>
            </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="field in keyFields">{{ field }}<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>{{ 'ADDITIONAL INFORMATION' | translate }}:</b>
            <span>{{ 'For additional information on advanced search syntax please see the Ansible Tower' | translate }}
            <a ng-attr-href="{{ documentationLink || undefined }}" target="_blank"> {{ 'documentation' | translate }}</a>.</span>
        </div>
    </div>
</div>
