<div class="gf-form-inline">
  <div class="gf-form">
    <label class="gf-form-label query-keyword width-9">Aggregation</label>
    <div class="gf-form-select-wrapper gf-form-select-wrapper--caret-indent">
      <gf-form-dropdown model="ctrl.target.aggregation.crossSeriesReducer" get-options="ctrl.aggOptions" class="gf-form width-12"
        disabled type="text" allow-custom="true" lookup-text="true" css-class="min-width-12" on-change="refresh()"></gf-form-dropdown>
    </div>
  </div>
  <div class="gf-form gf-form--grow">
    <label class="gf-form-label gf-form-label--grow">
      <a ng-click="ctrl.target.showAggregationOptions = !ctrl.target.showAggregationOptions">
        <i class="fa fa-caret-down" ng-show="ctrl.target.showAggregationOptions"></i>
        <i class="fa fa-caret-right" ng-hide="ctrl.target.showAggregationOptions"></i>
        Advanced Options
      </a>
    </label>
  </div>
</div>
<div class="gf-form-group" ng-if="ctrl.target.showAggregationOptions">
  <div class="gf-form offset-width-9">
    <label class="gf-form-label query-keyword width-12">Aligner</label>
    <div class="gf-form-select-wrapper gf-form-select-wrapper--caret-indent">
      <gf-form-dropdown model="ctrl.target.aggregation.perSeriesAligner" get-options="ctrl.alignOptions" class="gf-form width-12"
        disabled type="text" allow-custom="true" lookup-text="true" css-class="min-width-12" on-change="refresh()"></gf-form-dropdown>
    </div>

    <div class="gf-form gf-form--grow">
      <div class="gf-form-label gf-form-label--grow"></div>
    </div>
  </div>
</div>
<div class="gf-form-inline">
  <div class="gf-form">
    <label class="gf-form-label query-keyword width-9">Alignment Period</label>
    <div class="gf-form-select-wrapper gf-form-select-wrapper--caret-indent">
      <gf-form-dropdown model="ctrl.target.aggregation.alignmentPeriod" get-options="ctrl.alignmentPeriods" class="gf-form width-12"
        disabled type="text" allow-custom="true" lookup-text="true" css-class="min-width-12" on-change="refresh()"></gf-form-dropdown>
    </div>
  </div>

  <div class="gf-form gf-form--grow">
    <label ng-if="alignmentPeriod" class="gf-form-label gf-form-label--grow">
      {{ctrl.formatAlignmentText()}}
    </label>
  </div>
</div>