<div class="mention-input-wrapper">
    <span class="mention-input-btn-left" ng-show="includeBtn" ng-class="{ 'mention-textarea-btn': displayMode === 'textarea' }">
        <button type="button" class="btn btn-default" ng-disabled="inputReadonly"
                data-toggle="modal" ng-click="btn2Click()">
            {{ displayMode === 'textarea' ? 'F(x)=' : 'Fx' }}
        </button>
    </span>
    <div class="mention-input-content" contenteditable="false" ng-model="ngModelVal"
         ng-class="{ 'mention-input-disabled': inputReadonly, 'mention-with-btn': includeBtn, 'mention-textarea': displayMode === 'textarea' }"
         ng-model-options="{ allowInvalid: true }" ng-click="getFiredFormulaInfo()" ng-keyup="getFiredFormulaInfo()" ng-dblclick="onDoubleClick()"
         mentio mentio-typed-term="typedTerm" mentio-require-leading-space="false" mentio-select-not-found="true"
         mentio-id="'mentionMenu'" mentio-trigger-char="'@'" mentio-template-url="/tag-mentions.tpl" mentio-range-info="rangeInfo"
         mentio-items="searchedKeyValueList" mentio-search="searchKeyValue(term)" mentio-select="getKeyValueText(item)"
         mentio-auto-items="searchedFormulaList" mentio-auto-search="searchFormula(term)" mentio-auto-select="getFormulaText(item)"
         spellcheck="false" id="{{inputId}}" name="{{inputId}}" title="{{ inputReadonly ? ngModelVal : '' }}" tabindex="1">
    </div>
    <span class="mention-input-btn-right" ng-show="includeBtn" ng-class="{ 'mention-textarea-btn': displayMode === 'textarea' }">
        <button type="button" class="btn btn-default" ng-disabled="inputReadonly"
                data-toggle="modal" ng-click="btnClick()">
            <i class="fa fa-columns" aria-hidden="true"></i>
        </button>
    </span>
    <script type="text/ng-template" id="/tag-mentions.tpl">
        <ul class="list-group user-search">
            <li mentio-menu-item="tag" ng-repeat="tag in items | limitTo: 10" class="list-group-item">
                <span title="{{('Name' | translate) + ':' + tag.name + '&#10;' + ('Description' | translate) + ':' + tag.description}}"
                      ng-if="triggerChar && !parentScope.$parent.showName" class="text-primary"
                      ng-bind-html="tag.code | mentioHighlight:typedTerm:'menu-highlighted' | unsafe"></span>
                <span title="{{('Description' | translate) + ':' + tag.description}}"
                      ng-if="triggerChar && parentScope.$parent.showName" class="text-primary"
                      ng-bind-html="tag.name | mentioHighlight:typedTerm:'menu-highlighted' | unsafe"></span>
                <span title="{{tag.description}}"
                      ng-if="!triggerChar" class="text-primary"
                      ng-bind-html="(tag.code + '(' + tag.name + ')') | mentioHighlight:typedTerm:'menu-highlighted' | unsafe"></span>
            </li>
            <li ng-if="items.length > 10" class="list-group-item more-options">
                <span class="text-primary">...</span>
            </li>
        </ul>
    </script>
</div>