<ng-form name="vm.validationRuleForm">
  <div class="card-row-add-remove form-inline">
    <div class="form-group">
      <label>{{ 'Type' | translate }}</label>
      <div class="c8y-select-wrapper">
        <select
          class="form-control"
          name="valueType"
          ng-options="valueType as (valueType | translate) for valueType in vm.valueTypes track by valueType"
          ng-model="vm.selectedType"
          ng-change="vm.change()"
          required
        ></select>
        <span></span>
      </div>
    </div>
    <div class="form-group">
      <label>{{ 'Rule' | translate }}</label>
      <div class="c8y-select-wrapper">
        <select
          class="form-control"
          name="operations"
          ng-options="option as (option | translate) for option in vm.ruleOptions track by option"
          ng-model="vm.selectedRule"
          ng-change="vm.change()"
          required
        ></select>
        <span></span>
      </div>
    </div>
    <div class="form-group" ng-if="vm.showDateTime">
      <label for="booleanValue">{{ 'Value' | translate }}</label>
      <c8y-date-time-picker
        ng-model="vm.dateTimeValue"
        class="form-group"
        placeholder="{{ 'Select date' | translate }}"
        show-weeks="true"
        show-spinners="false"
        show-seconds="true"
        with-milliseconds="true"
        append-to-body="true"
        ng-change="vm.dateTimeChange()"
      ></c8y-date-time-picker>
    </div>
    <div class="form-group">
      <label for="booleanValue" ng-if="vm.showDateTime">{{ 'Value in ms' | translate }}</label>
      <label for="booleanValue" ng-if="!vm.showDateTime">{{ 'Value' | translate }}</label>
      <input
        type="text"
        class="form-control"
        ng-model="vm.value"
        placeholder="{{ vm.formValidation.tooltip | translate }}"
        ng-change="vm.change()"
        ng-blur="vm.reflectInDateTimePicker()"
        ng-pattern="vm.formValidation.pattern"
        name="booleanValue"
        id="booleanValue"
        uib-tooltip="{{ vm.formValidation.tooltip | translate }}"
        tooltip-popup-delay="500"
        tooltip-append-to-body="true"
        required
      />
      <c8y-error-feedback field="vm.validationRuleForm.booleanValue"></c8y-error-feedback>
    </div>
    <div class="add-remove-btns m-t-8">
      <button
        class="btn btn-dot btn-dot--danger m-l-8"
        type="button"
        aria-label="{{ 'Remove' | translate }}"
        uib-tooltip="{{ 'Remove' | translate }}"
        tooltip-popup-delay="500"
        tooltip-trigger="'mouseenter'"
      >
        <i c8y-icon="minus-circle"></i>
      </button>
      <button
        class="btn btn-xs btn-default"
        type="button"
        aria-label="{{ 'and' | translate }}"
        uib-tooltip="{{ 'and' | translate }}"
        tooltip-popup-delay="500"
        tooltip-trigger="'mouseenter'"
        ng-click="vm.onAdd({rule: vm.rule})"
        ng-if="vm.isLast"
      >
        {{ 'and' | translate }}
      </button>
    </div>
  </div>
</ng-form>
