<div class="variable-link-wrapper">
  <a
    ng-click="vm.show()"
    class="variable-value-link"
    aria-label="{{vm.selectors.submenuItemValueDropDownValueLinkTexts(vm.linkText)}}"
  >
    {{vm.linkText}}
    <span ng-repeat="tag in vm.selectedTags" bs-tooltip="tag.valuesText" data-placement="bottom">
      <span class="label-tag" tag-color-from-name="tag.text">
        &nbsp;&nbsp;<i class="fa fa-tag"></i>&nbsp; {{tag.text}}
      </span>
    </span>
    <i class="fa fa-caret-down" style="font-size:12px"></i>
  </a>

  <input
    type="text"
    class="gf-form-input"
    style="display: none"
    ng-keydown="vm.keyDown($event)"
    ng-model="vm.search.query"
    ng-change="vm.debouncedQueryChanged()"
  />

  <div
    class="variable-value-dropdown"
    ng-if="vm.dropdownVisible"
    ng-class="{'multi': vm.variable.multi, 'single': !vm.variable.multi}"
    aria-label="{{::vm.selectors.submenuItemValueDropDownDropDown}}"
  >
    <div class="variable-options-wrapper">
      <div class="variable-options-column">
        <a
          class="variable-options-column-header"
          ng-if="vm.variable.multi"
          ng-class="{'many-selected': vm.selectedValues.length > 1}"
          bs-tooltip="'Clear selections'"
          data-placement="top"
          ng-click="vm.clearSelections()"
        >
          <span class="variable-option-icon"></span>
          Selected ({{vm.selectedValues.length}})
        </a>
        <a
          class="variable-option pointer"
          ng-repeat="option in vm.search.options"
          ng-class="{'selected': option.selected, 'highlighted': $index === vm.highlightIndex}"
          ng-click="vm.selectValue(option, $event)"
        >
          <span class="variable-option-icon"></span>
          <span aria-label="{{vm.selectors.submenuItemValueDropDownOptionTexts(option.text)}}">{{option.text}}</span>
        </a>
      </div>
      <div class="variable-options-column" ng-if="vm.tags.length">
        <div class="variable-options-column-header text-center">
          Tags
        </div>
        <a
          class="variable-option-tag pointer"
          ng-repeat="tag in vm.tags"
          ng-click="vm.selectTag(tag, $event)"
          ng-class="{'selected': tag.selected}"
        >
          <span class="fa fa-fw variable-option-icon"></span>
          <span class="label-tag" tag-color-from-name="tag.text"
            >{{tag.text}}&nbsp;&nbsp;<i class="fa fa-tag"></i>&nbsp;</span
          >
        </a>
      </div>
    </div>
  </div>
</div>
