<div class="editor-row" style="margin-top: 10px;">

  <div  ng-repeat="target in panel.targets"
        class="tight-form-container"
        ng-class="{'tight-form-disabled': target.hide}"
        ng-controller="KairosDBQueryCtrl"
        ng-init="init()">

    <div class="tight-form">
      <ul class="tight-form-list pull-right">
        <li class="tight-form-item">
          <div class="dropdown">
            <a  class="pointer dropdown-toggle"
              data-toggle="dropdown"
              tabindex="1">
              <i class="fa fa-bars"></i>
            </a>
            <ul class="dropdown-menu pull-right" role="menu">
              <li role="menuitem">
                <a  tabindex="1"
                  ng-click="duplicate()">
                  Duplicate
                </a>
              </li>
            </ul>
          </div>
        </li>
        <li class="tight-form-item last">
          <a class="pointer" tabindex="1" ng-click="removeDataQuery(target)">
            <i class="fa fa-remove"></i>
          </a>
        </li>
      </ul>

      <ul class="tight-form-list">
        <li>
          <a  class="tight-form-item"
              ng-click="target.hide = !target.hide; get_data();"
              role="menuitem">
            <i class="fa fa-eye"></i>
          </a>
        </li>
      </ul>

      <ul class="tight-form-list" role="menu">
        <li>
          <input type="text"
                 class="tight-form-input"
                 ng-model="target.metric"
                 spellcheck='false'
                 bs-typeahead="suggestedMetrics"
                 placeholder="metric name"
                 data-min-length=0 data-items=100
                 ng-blur="targetBlur()"
                 >
          <a bs-tooltip="target.errors.metric"
             style="color: rgb(229, 189, 28)"
             ng-show="target.errors.metric">
            <i class="fa fa-warning"></i>
          </a>
        </li>
        <li class="tight-form-item">
          Aggregator
        </li>
        <li>
          <select ng-model="target.aggregator"
                  class="tight-form-input input-small"
                  ng-options="agg.id as agg.name for agg in aggregators"
                  ng-change="targetBlur()">
          </select>
          <a bs-tooltip="target.errors.aggregator"
             style="color: rgb(229, 189, 28)"
             ng-show="target.errors.aggregator">
            <i class="fa fa-warning"></i>
          </a>
        </li>
        <li class="tight-form-item">
          Sampling:
        </li>
        <li>
          <input type="text"
                 class="tight-form-input input-medium"
                 ng-model="target.sampling.value"
                 spellcheck='false'
                 placeholder="Sampling value"
                 ng-blur="targetBlur()"
                 />
        </li>
        <li>
          <select ng-model="target.sampling.unit"
                  class="tight-form-input input-small"
                  ng-options="u for u in timeUnits"
                  ng-change="targetBlur()">
          </select>
          <a bs-tooltip="target.errors.sampling"
             style="color: rgb(229, 189, 28)"
             ng-show="target.errors.sampling">
            <i class="fa fa-warning"></i>
          </a>
        </li>
      </ul>

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

    <div class="tight-form">
      <ul class="tight-form-list" role="menu">
        <li class="tight-form-item">
            Tags:
        </li>
        <li ng-repeat="tag in target.tags" class="tight-form-item">
          {{tag.key}}&nbsp;=&nbsp;{{tag.value}}
          <a ng-click="removeTag($index)">
            <i class="fa fa-remove"></i>
          </a>
        </li>

        <li class="tight-form-item" ng-hide="addTagMode">
          <a ng-click="addTag()">
            <i class="fa fa-plus"></i>
          </a>
        </li>

        <li ng-show="addTagMode">
            <input type="text"
                   class="input-small tight-form-input"
                   spellcheck='false'
                   bs-typeahead="suggestTagKeys"
                   data-min-length=0 data-items=100
                   ng-model="target.currentTagKey"
                   placeholder="key">
            <input type="text"
                   class="input-small tight-form-input"
                   spellcheck='false'
                   bs-typeahead="suggestTagValues"
                   data-min-length=0 data-items=100
                   ng-model="target.currentTagValue"
                   placeholder="value">
            <a ng-click="addTag()">
              <i class="fa fa-plus"></i>
            </a>
            <a bs-tooltip="target.errors.tags"
               style="color: rgb(229, 189, 28)"
               ng-show="target.errors.tags">
              <i class="fa fa-warning"></i>
            </a>
        </li>
      </ul>
      <div class="clearfix"></div>
    </div>
    <div class="tight-form">
      <ul class="tight-form-list" role="menu">
        <li class="tight-form-item">
            Group By:
        </li>
        <li ng-repeat="(key, value) in target.groups track by $index" class="tight-form-item">
          {{value}}
          <a ng-click="removeGroup($index)">
            <i class="fa fa-remove"></i>
          </a>
        </li>

        <li class="tight-form-item" ng-hide="addGroupMode">
          <a ng-click="addGroup()">
            <i class="fa fa-plus"></i>
          </a>
        </li>

        <li ng-show="addGroupMode">
            <input type="text"
                   class="input-small tight-form-input"
                   spellcheck='false'
                   bs-typeahead="suggestGroups"
                   data-min-length=0 data-items=100
                   ng-model="target.currentGroup"
                   placeholder="group">
            <a ng-click="addGroup()">
              <i class="fa fa-plus"></i>
            </a>
            <a bs-tooltip="target.errors.groups"
               style="color: rgb(229, 189, 28)"
               ng-show="target.errors.groups">
              <i class="fa fa-warning"></i>
            </a>
        </li>
      </ul>
      <div class="clearfix"></div>
    </div>

  </div>
</div>
