<div
  class="suggestions"
  ng-class="{ 'suggestions-isPopover': shouldPopover === 'true' }"
  data-suggestions-list
>
  <div
    class="suggestion"
    data-suggestion-list-item
    ng-class="{active: $index === selectedIndex}"
    ng-repeat="suggestion in suggestions | orderBy:'name' track by $index"
    ng-mousedown="onMouseDown($event)"
    ng-click="onClickSuggestion({ suggestionIndex: $index })"
    aria-label="{{suggestion.name}}"
    aria-describedby="timelionSuggestionDescription{{$index}}"
    data-test-subj="timelionSuggestionListItem"
  >
    <h4>
      <strong>.{{suggestion.name}}()</strong>
      <small id="timelionSuggestionDescription{{$index}}">
        {{suggestion.help}}
        {{suggestion.chainable ? '(Chainable)' : '(Data Source)'}}
      </small>
    </h4>

    <div ng-show="suggestion.args.length > (suggestion.chainable ? 1: 0)">
      <div ng-show="suggestions.length > 1">
        <strong>Arguments:</strong>
        <span ng-repeat="arg in suggestion.args" ng-hide="$index < 1 && suggestion.chainable">
          <strong>{{arg.name}}</strong>=(<em>{{arg.types.join(' | ')}}</em>)
          <em ng-show="!$last">,</em>
        </span>
      </div>

      <div class="suggestion-details" ng-show="suggestions.length === 1">
        <table class="table table-striped table-condensed table-bordered">
        <thead>
          <th>Argument Name</th>
          <th>Accepted Types</th>
          <th>Information</th>
        </thead>
        <tr ng-repeat="arg in suggestion.args" ng-hide="$index < 1 && suggestion.chainable">
          <td>{{arg.name}}</td>
          <td><em>{{arg.types.join(', ')}}</em></td>
          <td>{{arg.help}}</td>
        </tr>
        </table>
      </div>
    </div>
  </div>
</div>
