<div class="gf-form-inline">
  <div class="gf-form">
    <label class="gf-form-label query-keyword width-8">Region</label>
    <metric-segment segment="regionSegment" get-options="getRegions()" on-change="regionChanged()"></metric-segment>
  </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" ng-if="target.expression.length === 0">
  <div class="gf-form">
    <label class="gf-form-label query-keyword width-8">Metric</label>

    <metric-segment
      segment="namespaceSegment"
      get-options="getNamespaces()"
      on-change="namespaceChanged()"
    ></metric-segment>
    <metric-segment segment="metricSegment" get-options="getMetrics()" on-change="metricChanged()"></metric-segment>
  </div>

  <div class="gf-form">
    <label class="gf-form-label query-keyword">Stats</label>
  </div>

  <div class="gf-form" ng-repeat="segment in statSegments">
    <metric-segment
      segment="segment"
      get-options="getStatSegments(segment, $index)"
      on-change="statSegmentChanged(segment, $index)"
    ></metric-segment>
  </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" ng-if="target.expression.length === 0">
  <div class="gf-form">
    <label class="gf-form-label query-keyword width-8">Dimensions</label>
    <metric-segment
      ng-repeat="segment in dimSegments"
      segment="segment"
      get-options="getDimSegments(segment, $index)"
      on-change="dimSegmentChanged(segment, $index)"
    ></metric-segment>
  </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" ng-if="target.statistics.length === 1">
  <div class="gf-form">
    <label class=" gf-form-label query-keyword width-8 ">
      Id
      <info-popover mode="right-normal "
        >Id can include numbers, letters, and underscore, and must start with a lowercase letter.</info-popover
      >
    </label>
    <input
      type="text "
      class="gf-form-input "
      ng-model="target.id "
      spellcheck="false"
      ng-pattern="/^[a-z][a-zA-Z0-9_]*$/"
      ng-model-onblur
      ng-change="onChange() "
    />
  </div>
  <div class="gf-form max-width-30 ">
    <label class="gf-form-label query-keyword width-7 ">Expression</label>
    <input
      type="text "
      class="gf-form-input "
      ng-model="target.expression
 "
      spellcheck="false"
      ng-model-onblur
      ng-change="onChange() "
    />
  </div>
</div>

<div class="gf-form-inline ">
  <div class="gf-form ">
    <label class="gf-form-label query-keyword width-8 ">
      Min period
      <info-popover mode="right-normal ">Minimum interval between points in seconds</info-popover>
    </label>
    <input
      type="text "
      class="gf-form-input "
      ng-model="target.period "
      spellcheck="false"
      placeholder="auto
 "
      ng-model-onblur
      ng-change="onChange() "
    />
  </div>
  <div class="gf-form max-width-30 ">
    <label class="gf-form-label query-keyword width-7 ">Alias</label>
    <input
      type="text "
      class="gf-form-input "
      ng-model="target.alias "
      spellcheck="false"
      ng-model-onblur
      ng-change="onChange() "
    />
    <info-popover mode="right-absolute ">
      Alias replacement variables:
      <ul ng-non-bindable>
        <li>{{ metric }}</li>
        <li>{{ stat }}</li>
        <li>{{ namespace }}</li>
        <li>{{ region }}</li>
        <li>{{ period }}</li>
        <li>{{ label }}</li>
        <li>{{ YOUR_DIMENSION_NAME }}</li>
      </ul>
    </info-popover>
  </div>

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