<div class="col-sm-{{::col}} at-InputContainer">
    <div class="form-group at-u-flat">
        <at-input-label></at-input-label>

        <div class="at-InputLookup">
            <button class="at-InputLookup-button"
                    ng-disabled="state._disabled || form.disabled"
                    ng-click="vm.lookup()">
                <i class="fa fa-search"></i>
            </button>
            <input type="text"
                class="form-control at-Input"
                ng-class="{ 'at-Input--rejected': state._rejected }"
                ng-model="state._displayValue"
                ng-attr-tabindex="{{ tab || undefined }}"
                ng-attr-placeholder="{{::state._placeholder || undefined }}"
                ng-change="vm.searchOnInput()"
                ng-hide="state._lookupTags"
                ng-disabled="state._disabled || form.disabled">

            <span class="at-InputLookup-tagContainer LabelList-lookupTags"
                ng-if="state._lookupTags"
                ng-disabled="state._disabled || form.disabled">
                <div class="LabelList-tagContainer" ng-repeat="tag in state._value track by $index">
                    <at-tag ng-if="!tag.hostname" tag="tag" remove-tag="vm.removeTag(tag)"></at-tag>
                    <at-tag ng-if="tag.hostname" tag="tag.hostname" remove-tag="vm.removeTag(tag)"></at-tag>
                </div>
            </span>
        </div>

        <at-input-message></at-input-message>
    </div>
</div>
