<div
  class="m-b-24"
  ng-if="!multiple"
>
  <ng-form name="nestedSmartRuleForm">
    <div
      class="form-group alarmType"
      ng-class="{ 'has-error': nestedSmartRuleForm.$dirty && nestedSmartRuleForm.$invalid }"
    >
      <input
        class="form-control span"
        uib-tooltip="{{ tooltip(param) }}"
        tooltip-popup-delay="500"
        tooltip-append-to-body="true"
        placeholder="{{ placeholder(param) | translate }}"
        type="{{ param.type }}"
        ng-model="rule.config[param.property]"
        ng-required="param.required"
      />
    </div>
  </ng-form>
</div>
<div
  class="m-b-24"
  ng-if="multiple"
>
  <div
    class="form-group"
    ng-repeat="alarmType in alarmTypes"
  >
    <ng-form name="nestedSmartRuleForm">
      <div
        class="input-group"
        ng-class="{ 'has-error': nestedSmartRuleForm.$dirty && nestedSmartRuleForm.$invalid }"
      >
        <input
          class="form-control"
          uib-tooltip="{{ tooltip(param) }}"
          tooltip-popup-delay="500"
          tooltip-append-to-body="true"
          placeholder="{{ placeholder(param) | translate }}"
          type="{{ param.type }}"
          ng-model="alarmType.name"
          ng-required="param.required"
        />
        <span class="input-group-btn">
          <button
            class="btn btn-link"
            title="{{ 'Remove' | translate }}"
            type="button"
            ng-click="remove(alarmType)"
            ng-disabled="alarmTypes.length <= 1"
          >
            <i
              c8y-icon="minus-circle"
              class="text-danger"
            ></i>
          </button>
        </span>
      </div>
    </ng-form>
  </div>
  <button
    class="btn btn-default"
    title="{{ 'Add alarm type' | translate }}"
    type="button"
    ng-click="add()"
  >
    <i c8y-icon="plus-circle"></i>
    {{ 'Add alarm type' | translate }}
  </button>
</div>