<query-editor-row query-ctrl="ctrl" has-text-edit-mode="true">

  <div class="gf-form" ng-show="ctrl.state.target.textEditor">
    <graphite-text-editor style="width: 100%" rawQuery="ctrl.state.target.target" dispatch="ctrl.dispatch"></graphite-text-editor>
  </div>

  <div ng-hide="ctrl.target.textEditor">
    <div class="gf-form-inline">
      <div class="gf-form">
        <label class="gf-form-label width-6 query-keyword">Series</label>
      </div>

      <div ng-if="ctrl.state.queryModel.seriesByTagUsed" ng-repeat="tag in ctrl.state.queryModel.tags" class="gf-form">
        <gf-form-dropdown
          model="tag.key"
          allow-custom="true"
          label-mode="true"
          debounce="true"
          placeholder="Tag key"
          css-class="query-segment-key"
          get-options="ctrl.getTags($index, $query)"
          on-change="ctrl.tagChanged(tag, $index)"
        ></gf-form-dropdown>

        <gf-form-dropdown
          model="tag.operator"
          label-mode="true"
          css-class="query-segment-operator"
          get-options="ctrl.getTagOperators()"
          on-change="ctrl.tagChanged(tag, $index)"
          min-input-width="30"
        ></gf-form-dropdown>
        <gf-form-dropdown
          model="tag.value"
          allow-custom="true"
          label-mode="true"
          debounce="true"
          css-class="query-segment-value"
          placeholder="Tag value"
          get-options="ctrl.getTagValues(tag, $index, $query)"
          on-change="ctrl.tagChanged(tag, $index)"
        ></gf-form-dropdown>
        <label class="gf-form-label query-keyword" ng-if="$index !== ctrl.state.queryModel.tags.length - 1">AND</label>
      </div>

      <div ng-if="ctrl.state.queryModel.seriesByTagUsed" ng-repeat="segment in ctrl.state.addTagSegments" role="menuitem" class="gf-form">
        <metric-segment segment="segment" get-options="ctrl.getTagsAsSegments($query)" on-change="ctrl.addNewTag(segment)" debounce="true" />
      </div>

      <div ng-if="!ctrl.state.queryModel.seriesByTagUsed" ng-repeat="segment in ctrl.state.segments" role="menuitem" class="gf-form">
        <metric-segment segment="segment" get-options="ctrl.getAltSegments($index, $query)" on-change="ctrl.segmentValueChanged(segment, $index)" />
      </div>

      <div ng-if="ctrl.state.paused" class="gf-form">
        <play-button dispatch="ctrl.dispatch" />
      </div>

      <div class="gf-form gf-form--grow">
        <div class="gf-form-label gf-form-label--grow"></div>
      </div>
    </div>

    <div class="gf-form-inline">
      <div class="gf-form">
        <label class="gf-form-label width-6 query-keyword">Functions</label>
      </div>

      <div ng-repeat="func in ctrl.state.queryModel.functions" class="gf-form">
        <graphite-function-editor func="func" dispatch="ctrl.dispatch" ng-hide="func.hidden"></graphite-function-editor>
      </div>

      <div class="gf-form dropdown">
        <add-graphite-function funcDefs="ctrl.state.funcDefs" dispatch="ctrl.dispatch" />
      </div>

      <div class="gf-form gf-form--grow">
        <div class="gf-form-label gf-form-label--grow"></div>
      </div>
    </div>
  </div>
</query-editor-row>
