      <div>
        <div class="discover-field-details">
          <h5 ng-show="!field.details.error">Quick Count <kbn-info info="Top 5 values based on documents in the table" placement="right"></kbn-info>
            <span ng-if="!field.details.error" class="small discover-field-details-count">
              (
              <a
                ng-show="!indexPattern.metaFields.includes(field.name)"
                ng-click="updateFilterInQuery('_exists_', field.name, '+')">
                {{::field.details.exists}}
              </a>
              <span
                ng-show="indexPattern.metaFields.includes(field.name)">
                {{::field.details.exists}}
              </span>
              /{{::field.details.total}} records
              )
            </span>
          </h5>

          <div class="clearfix"></div>

          <div ng-if="field.details.error" class="discover-field-details-error">{{field.details.error}}</div>

          <div ng-if="!field.details.error">
            <div ng-repeat="bucket in ::field.details.buckets" class="discover-field-details-item">
              <div>
                <span ng-show="field.filterable" class="pull-right">
                  <i aria-hidden="true" class="fa fa-search-minus pull-right discover-field-details-filter"
                    ng-click="updateFilterInQuery(field, bucket.value, '-')"  data-test-subj="minus-{{::field.name}}-{{::bucket.display}}"></i>
                  <i aria-hidden="true" class="fa fa-search-plus pull-right discover-field-details-filter"
                    ng-click="updateFilterInQuery(field, bucket.value, '+')" data-test-subj="plus-{{::field.name}}-{{::bucket.display}}"></i>
                </span>
                <div css-truncate css-truncate-expandable="true" class="discover-field-details-value" title="{{::bucket.display}}">
                  {{::bucket.display}} <i ng-show="bucket.display === ''">Empty string</i>
                </div>
              </div>
              <kbn-tooltip text="{{::bucket.count}}" placement="right" append-to-body="1">
                <progressbar value="bucket.percent" max="100" animate="false"><span>{{bucket.percent}}%</span></progressbar>
              </kbn-tooltip>
            </div>
          </div>
        </div>
      </div>

      <a
        ng-href="{{vizLocation(field)}}"
        ng-show="field.visualizable"
        class="sidebar-item-button primary"
        data-test-subj="fieldVisualize-{{::field.name}}">
          Visualize
          <span class="discover-field-vis-warning" ng-show="warnings.length" tooltip="{{warnings.join(' ')}}">
          ( {{::warnings.length}} <ng-pluralize count="warnings.length" when="{'1':'warning', 'other':'warnings'}"></ng-pluralize> <i aria-hidden="true" class="fa fa-warning"></i> )
          </span>
      </a>
