<div class="form" ng-form="vm.mappingForm">
  <div class="p-t-16">
    <div class="legend form-block" translate>Validation rules</div>
    <div ng-if="vm.rules.length > 0" ng-repeat="andRules in vm.rules" class="m-t-24">
      <div ng-if="$index > 0" class="legend form-block center p-r-80" translate>Or</div>
      <c8y-lwm2m-validation-rule
        ng-repeat="rule in andRules"
        rule="rule"
        options="vm.options"
        resource-data-type="{{ vm.resourceDataType }}"
        value-types="vm.valueTypes"
        on-remove="vm.remove(rule)"
        on-add="vm.addAndRule(rule)"
        on-change="vm.changes(rule)"
        is-last="$last"
      ></c8y-lwm2m-validation-rule>
      <hr ng-if="vm.isLast(andRules)" />
      <button
        title="{{ 'Or' | translate }}"
        id="orBtn-{{ vm.resource.id }}"
        ng-click="vm.addOrGroup()"
        ng-if="vm.isLast(andRules)"
        class="btn btn-default btn-sm"
        translate
      >
        Or
      </button>
    </div>

    <c8y-ui-empty-state
      ng-if="vm.rules.length === 0"
      [icon]="'c8y-data-points'"
      [title]="'No validation for this resource.' | translate"
      [subtitle]="'Add a validation rule by clicking below.' | translate"
    >
      <button
        title="{{ 'Add validation rule' | translate }}"
        type="button"
        ng-click="vm.addAndRule({})"
        class="btn btn-default btn-sm m-t-8"
      >
        {{ 'Add validation rule' | translate }}
      </button>
    </c8y-ui-empty-state>
  </div>
</div>
