<div class="card">
  <div class="card-block overflow-visible" *ngIf="accessMapping.when.childPredicates.length != 0">
    <div class="legend form-block m-t-4" translate>When</div>
    <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 accessMapping.when.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
            [name]="'value' + accessMappingIndex + idx"
            [id]="'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
            name="removeButton"
            class="btn btn-link hidden-xs hidden-sm"
            (click)="removeChildPredicate(childPredicate)"
            title="{{ 'Remove' | translate }}"
            type="button"
          >
            <i c8yIcon="minus-circle" class="text-danger"></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-xs hidden-xs hidden-sm"
            (click)="addChildPredicate()"
            type="button"
            translate
          >
            and
          </button>
          <button
            title="{{ 'and' | translate }}"
            class="btn btn-default btn-block btn-sm visible-xs visible-sm"
            (click)="addChildPredicate()"
            type="button"
            translate
          >
            and
          </button>
        </c8y-form-group>
      </div>
    </div>

    <div class="legend form-block" translate>Provide access to</div>
    <div class="row">
      <div class="col-sm-6">
        <div title="{{ 'Default global roles' | translate }}" class="form-group">
          <label [for]="'groups' + accessMappingIndex" class="control-label">
            {{ 'Default global roles' | translate }}
          </label>
          <c8y-select
            [id]="'groups' + accessMappingIndex"
            [items]="groups"
            [selected]="selectedGroups"
            [disableApplyOnNoSelection]="true"
            (onChange)="selectedGroups = $event; accessMapping.thenGroups = getIds($event)"
          >
          </c8y-select>
        </div>
      </div>
      <div class="col-sm-6">
        <div title="{{ 'Default applications' | translate }}" class="form-group">
          <label [for]="'apps' + accessMappingIndex" class="control-label">
            {{ 'Default applications' | translate }}
          </label>
          <c8y-select
            [id]="'apps' + accessMappingIndex"
            [items]="apps"
            [selected]="selectedApps"
            [disableApplyOnNoSelection]="true"
            (onChange)="selectedApps = $event; accessMapping.thenApplications = getIds($event)"
          >
          </c8y-select>
        </div>
      </div>
    </div>
  </div>
</div>