<div class="row">
  <div class="col-lg-12">
    <label>{{ 'Time interval' | translate }}</label>
  </div>
  <ng-form name="nestedSmartRuleForm1">
    <div
      class="form-group col-lg-6"
      ng-class="{ 'has-error': nestedSmartRuleForm1.$dirty && nestedSmartRuleForm1.$invalid }"
    >
      <input
        id="Duration"
        name="amount"
        type="number"
        class="form-control"
        uib-tooltip="{{ placeholder(param, fieldNames.AMOUNT) }}"
        tooltip-popup-delay="500"
        tooltip-append-to-body="true"
        placeholder="{{ placeholder(param, fieldNames.AMOUNT) }}"
        name="amount"
        type="number"
        ng-model="timeInterval.amount"
        min="1"
        ng-required="param.required"
      />
    </div>
  </ng-form>
  <ng-form name="nestedSmartRuleForm2">
    <div
      class="form-group col-lg-6"
      ng-class="{ 'has-error': nestedSmartRuleForm2.$dirty && nestedSmartRuleForm2.$invalid }"
    >
      <div class="c8y-select-wrapper">
        <select
          aria-label="{{ 'Time interval' | translate }}"
          name="unit"
          class="form-control"
          ng-options="unit as (unit.label | translate) for unit in units | filter: {dontDisplay: false}"
          ng-model="timeInterval.unit"
          ng-required="param.required"
          placeholder="{{ placeholder(param, fieldNames.UNIT) }}"
          uib-tooltip="{{ placeholder(param, fieldNames.UNIT) }}"
          tooltip-popup-delay="500"
          tooltip-append-to-body="true"
        ></select>
      </div>
    </div>
  </ng-form>
</div>