<div class="form-group">
  <label for="visEditorInterval{{agg.id}}">
    Interval
    <icon-tip
      ng-show="agg.buckets.getInterval().scaled"
      type="'alert'"
      position="'right'"
      content="'This interval creates {{ agg.buckets.getInterval().scale > 1 ? 'buckets that are too large' : 'too many buckets' }} to show in the selected time range, so it has been scaled to {{ agg.buckets.getInterval().description }}'"
    ></icon-tip>
  </label>
  <select
    ng-if="!editorConfig.customInterval.timeBase"
    id="visEditorInterval{{agg.id}}"
    ng-model="agg.params.interval"
    ng-change="agg.write()"
    required
    ng-options="opt as opt.display for opt in aggParam.options.raw | filter: optionEnabled"
    class="form-control"
    name="interval">
    <option value="">-- select a valid interval --</option>
  </select>
  <input
    aria-label="Custom interval"
    type="text"
    name="customInterval"
    ng-model="agg.params.customInterval"
    validate-date-interval="{{editorConfig.customInterval.timeBase}}"
    ng-change="aggForm.customInterval.$valid && agg.write()"
    ng-if="agg.params.interval.val == 'custom'"
    class="form-control"
    required />
  <div
    ng-if="editorConfig.customInterval.help"
    class="kuiSubText kuiSubduedText kuiVerticalRhythmSmall"
    style="margin-top: 5px"
  >
    <span>{{editorConfig.customInterval.help}}</span>
  </div>
</div>
