<div class="dscFieldDetails">
  <div class="kuiVerticalRhythmSmall">
    <p class="euiText euiText--extraSmall euiTextColor--subdued" ng-show="!field.details.error">
      Top 5 values in
      <span ng-if="!field.details.error">
        <a
          class="kuiLink"
          kbn-accessible-click
          ng-show="!field.indexPattern.metaFields.includes(field.name) && !field.scripted"
          ng-click="onAddFilter('_exists_', field.name, '+')">
          {{::field.details.exists}}
        </a>
        <span
          ng-show="field.indexPattern.metaFields.includes(field.name) || field.scripted">
          {{::field.details.exists}}
        </span>
        / {{::field.details.total}} records
      </span>
    </p>

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

    <div ng-if="field.details.error" class="euiText euiText--extraSmall euiTextColor--subdued">{{field.details.error}}</div>

    <div ng-if="!field.details.error">
      <div ng-repeat="bucket in ::field.details.buckets" class="dscFieldDetailsItem">
        <div class="dscFieldDetailsItem__title">
          <!-- Field value -->
          <div
            css-truncate
            css-truncate-expandable="true"
            class="dscFieldDetails__value"
            aria-label="Value: {{:: bucket.display === '' ? 'Empty string' : bucket.display }}"
          >
            {{::bucket.display}} <em ng-show="bucket.display === ''">Empty string</em>
          </div>

          <!-- Add/remove filter buttons -->
          <div
            class="dscFieldDetailsItem__buttonGroup"
            ng-show="field.filterable"
          >
            <button
              class="dscFieldDetailsItem__button"
              ng-click="onAddFilter(field, bucket.value, '+')"
              aria-label="Filter for this value"
              data-test-subj="plus-{{::field.name}}-{{::bucket.display}}"
            >
              <span
                aria-hidden="true"
                class="kuiIcon fa-search-plus dscFieldDetails__filter"
              ></span>
            </button>

            <button
              class="dscFieldDetailsItem__button"
              ng-click="onAddFilter(field, bucket.value, '-')"
              aria-label="Filter out this value"
              data-test-subj="minus-{{::field.name}}-{{::bucket.display}}"
            >
              <span
                aria-hidden="true"
                class="kuiIcon fa-search-minus dscFieldDetails__filter"
              ></span>
            </button>
          </div>
        </div>
        <kbn-tooltip text="{{::bucket.count}}" placement="right" append-to-body="1">
          <progressbar
            value="bucket.percent"
            max="100"
            animate="false"
          >
            <span class="dscFieldDetails__progress">{{bucket.percent}}%</span>
          </progressbar>
        </kbn-tooltip>
      </div>
    </div>
  </div>

  <a
    ng-href="{{field.details.visualizeUrl}}"
    ng-show="field.visualizable"
    class="kuiButton kuiButton--secondary kuiButton--small kuiButton--fullWidth kuiVerticalRhythmSmall"
    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>
</div>
