<div class="row">
  <div class="col-md-4">
    <p translate>
      Specifying auto-apply constraints allows you to limit the scope where the device protocols are
      applied, for example by specifying a set of possible servers or node IDs.
    </p>
    <p translate>
      If no constraints are set, device protocols are applied at any fitting location on the OPC UA
      server.
    </p>
  </div>

  <div class="col-md-6">
    <ul class="list-group" style="box-shadow: none;">
      <!-- Limit device type to a set of servers -->
      <li class="list-group-item">
        <label
          title="{{ 'Limit device protocol to a set of servers' | translate }}"
          class="c8y-checkbox"
        >
          <input
            type="checkbox"
            [checked]="
              constraints.matchesServerIds !== null && constraints.matchesServerIds.length > 0
            "
            (change)="onChangeShowServerIds($event)"
          />
          <span></span>
          <span class="m-l-8">
            {{ 'Limit device protocol to a set of servers' | translate }}
          </span>
        </label>
        <div
          class="collapse"
          [collapse]="
            (!showServerIds &&
              (constraints.matchesServerIds !== null && constraints.matchesServerIds.length < 1)) ||
            (!showServerIds && constraints.matchesServerIds === null)
          "
          [isAnimated]="true"
        >
          <c8y-form-group class="m-t-8 m-b-8">
            <c8y-select-legacy
              [items]="opcuaServers"
              [selected]="selectedItems"
              [placeholder]="placeholderSelectServerIds"
              (onChange)="serverIdsSelected($event)"
              [updateItems]="updateSelectedItem"
            >
            
              <c8y-li *ngIf="opcuaServers.length > sizeToShowFilter" class="sticky-top">
                <c8y-filter [icon]="'search'"  (onSearch)="filterItems($event)"></c8y-filter>
              </c8y-li>
              <c8y-li *ngIf="filteredList && filteredList.length === 0">
                <c8y-li-body> 
                  <div class="c8y-empty-state text-left">
                  <p>{{ 'No items to display.' | translate }}</p>
                </div>
                </c8y-li-body>
              </c8y-li>
              <c8y-li *ngFor="let item of filteredList">
                <c8y-li-checkbox
                  [selected]="isChecked(item)"
                  (onSelect)="onSelect($event, item)"
                ></c8y-li-checkbox>
                <c8y-li-body>{{ item.name | translate }}<br>
                  <span class="text-label-small m-r-4" translate>ID</span> <small>{{ item.id }}</small>
                </c8y-li-body>
              </c8y-li>
            </c8y-select-legacy>
          </c8y-form-group>
        </div>
      </li>
      <!-- Limit device type scope in the address space -->
      <li class="list-group-item">
        <label
          title="{{ 'Limit device protocol scope in the address space' | translate }}"
          class="c8y-checkbox"
        >
          <input
            type="checkbox"
            [checked]="
              constraints.browsePathMatchesRegex !== null &&
              constraints.browsePathMatchesRegex.length > 0
            "
            (change)="onChangeShowBrowsePath($event)"
          />
          <span></span>
          <span class="m-l-8">
            {{ 'Limit device protocol scope in the address space' | translate }}
          </span>
        </label>
        <div
          class="collapse"
          [isAnimated]="true"
          [collapse]="
            (!showBrowsePath &&
              constraints.browsePathMatchesRegex !== null &&
              constraints.browsePathMatchesRegex.length < 1) ||
            (!showBrowsePath && constraints.browsePathMatchesRegex === null)
          "
        >
          <c8y-form-group class="m-t-8 m-b-8">
            <input
              name="browsePath"
              type="text"
              class="form-control"
              placeholder="{{ 'e.g.' | translate }} /objects/devices/.*"
              [(ngModel)]="constraints.browsePathMatchesRegex"
              ngDefaultControl
            />
          </c8y-form-group>
        </div>
      </li>
      <!-- Limit device type to servers with a certain fragment-->
      <li class="list-group-item">
        <label
          title="{{ 'Limit device protocol to servers with a certain fragment' | translate }}"
          class="c8y-checkbox"
        >
          <input
            type="checkbox"
            [checked]="constraints.serverObjectHasFragment !== null && constraints.serverObjectHasFragment.length > 0"
            (change)="onChangeShowServerFragment($event)"
          />
          <span></span>
          <span class="m-l-8">
            {{ 'Limit device protocol to servers with a certain fragment' | translate }}
          </span>
        </label>
        <div
          class="collapse"
          [isAnimated]="true"
          [collapse]="(!showServerFragment && constraints.serverObjectHasFragment !== null && constraints.serverObjectHasFragment.length < 1) || (!showServerFragment && constraints.serverObjectHasFragment === null)"
        >
          <c8y-form-group class="m-t-8 m-b-8">
            <input
              name="serverFragment"
              type="text"
              class="form-control"
              placeholder="{{ 'e.g.' | translate }} c8y_SomeServerMarker"
              [(ngModel)]="constraints.serverObjectHasFragment"
              ngDefaultControl
            />
          </c8y-form-group>
        </div>
      </li>
      <!-- Limit device type to a specific root node ID -->
      <li class="list-group-item">
        <label
          title="{{ 'Limit device protocol to specific root nodes ID' | translate }}"
          class="c8y-checkbox"
        >
          <input
            type="checkbox"
            [checked]="constraints.matchesNodeIds !== null && constraints.matchesNodeIds.length > 0"
            (change)="onChangeNodeId($event)"
          />
          <span></span>
          <span class="m-l-8">
            {{ 'Limit device protocol to specific root nodes ID' | translate }}
          </span>
        </label>
        <div
          class="collapse"
          [isAnimated]="true"
          [collapse]="(!showRootNodes && constraints.matchesNodeIds !== null && constraints.matchesNodeIds.length < 1) || ( !showRootNodes && constraints.matchesNodeIds === null)"
        >
            <ul c8yInputGroupListContainer class="list-unstyled p-t-16">
              <li
                class="m-b-8"
                *ngFor="let item of constraints.matchesNodeIds; let i = index; trackBy: trackByFn"
              >
                <c8y-input-group-list [index]="i" (onAdd)="add()" (onRemove)="remove($event)">
                  <c8y-form-group class="form-group--tooltip-validation">
                    <input
                      type="text"
                      class="form-control"
                      placeholder="{{ 'e.g.' | translate }} nodeId"
                      [(ngModel)]="constraints.matchesNodeIds[i]"
                      [required]="true"
                    />
                  </c8y-form-group>
                </c8y-input-group-list>
              </li>
            </ul> 
        </div>
      </li>
    </ul>
  </div>
</div>