<fieldset class="c8y-fieldset p-16">
  <legend>{{ 'When' | translate }}</legend>
  <div class="tight-grid hidden-sm hidden-xs">
    <div class="col-md-4">
      <label translate>Key</label>
    </div>
    <div class="col-md-2">
      <label translate>Operator`logical`</label>
    </div>
    <div class="col-md-4">
      <label translate>Value</label>
    </div>
  </div>
  <div
    class="tight-grid"
    *ngFor="let childPredicate of childPredicates; last as isLast; index as idx"
  >
    <div class="col-md-4">
      <c8y-form-group>
        <label
          [for]="'parameterPath' + accessMappingIndex + idx"
          class="visible-sm visible-xs"
          translate
        >
          Key
        </label>
        <input
          [name]="'parameterPath' + accessMappingIndex + idx"
          [id]="'parameterPath' + accessMappingIndex + idx"
          type="text"
          class="form-control"
          [(ngModel)]="childPredicate.parameterPath"
          placeholder="{{ 'Key' | translate }}"
          required
        />
      </c8y-form-group>
    </div>
    <div class="col-md-2">
      <c8y-form-group>
        <label
          [for]="'operator' + accessMappingIndex + idx"
          class="visible-sm visible-xs"
          translate
        >
          Operator`logical`
        </label>
        <div class="c8y-select-wrapper">
          <select
            class="form-control"
            [name]="'operator' + accessMappingIndex + idx"
            [id]="'operator' + accessMappingIndex + idx"
            [(ngModel)]="childPredicate.operator"
            required
          >
            <option
              *ngFor="let relation of relations"
              [ngValue]="relation.value"
            >
              {{ relation.label | translate }}
            </option>
          </select>
          <span></span>
        </div>
      </c8y-form-group>
    </div>
    <div class="col-md-4">
      <c8y-form-group>
        <label
          [for]="'value' + accessMappingIndex + idx"
          class="visible-sm visible-xs"
          translate
        >
          Value
        </label>
        <input
          [id]="'value' + accessMappingIndex + idx"
          [name]="'value' + accessMappingIndex + idx"
          type="text"
          class="form-control"
          [(ngModel)]="childPredicate.value"
          placeholder="{{ 'Value' | translate }}"
          required
        />
      </c8y-form-group>
    </div>
    <div class="col-md-1">
      <c8y-form-group>
        <button
          class="btn btn-dot btn-dot--danger hidden-xs hidden-sm"
          name="removeButton"
          (click)="removeChildPredicate(childPredicate)"
          tooltip="{{ 'Remove' | translate }}"
          [attr.aria-label]="'Remove' | translate"
          [delay]="300"
          type="button"
        >
          <i c8yIcon="minus-circle"></i>
        </button>
        <button
          name="removeButton"
          class="btn btn-danger btn-block btn-sm visible-xs visible-sm"
          (click)="removeChildPredicate(childPredicate)"
          title="{{ 'Remove' | translate }}"
          type="button"
        >
          <i c8yIcon="minus-circle"></i>
          <span translate>Remove</span>
        </button>
      </c8y-form-group>
    </div>
    <div class="col-md-1">
      <c8y-form-group *ngIf="isLast">
        <button
          title="{{ 'and' | translate }}"
          class="btn btn-default btn-block btn-sm"
          (click)="addChildPredicate()"
          type="button"
          translate
        >
          and
        </button>
      </c8y-form-group>
    </div>
  </div>
</fieldset>