<div class="col-sm-6">
  <label title="{{ 'Current top level nodes' | translate }}" translate>
    Current top level nodes
  </label>
  <c8y-list-group class="separator-top">
    <c8y-li *ngIf="config.rootNodes.length === 0">
      <div class="c8y-empty-state text-left">
        <h1 c8yIcon="folder-open"></h1>
        <p>
          <strong>{{ 'No top level nodes set' | translate }}</strong>
        </p>
      </div>
    </c8y-li>
    <c8y-li *ngFor="let node of config.rootNodes; let index = index">
      <c8y-li-icon icon="c8y-group"></c8y-li-icon>
      <div class="content-flex-30">
        <div class="col-6">
          <div class="text-truncate" title="{{ node.name }}">
            {{ node.name }}
          </div>
        </div>
        <div class="col-4">
          <label class="c8y-switch c8y-switch--inline" title="{{ 'Hide devices' | translate }}">
            <input
              type="checkbox"
              [(ngModel)]="node.hideDevices"
              name="node.{{ index }}.hideDevices"
              (change)="onUpdate.emit()"
            />
            <span></span>
            <small>{{ 'Hide devices' | translate }}</small>
          </label>
        </div>
        <div class="col-2 text-right">
          <button
            class="btn-clean"
            title="{{ 'Remove' | translate }}"
            (click)="removeNavigatorNode(node)"
          >
            <i c8yIcon="minus-circle" class="text-danger"></i>
          </button>
        </div>
      </div>
    </c8y-li>
  </c8y-list-group>
</div>

<div class="col-sm-6 col-md-5 col-md-offset-1">
  <label title="{{ 'Select top level nodes' | translate }}" translate>Select top level nodes</label>
  <c8y-asset-selector
    [config]="{ groupsOnly: true, multi: true, groupsSelectable: true }"
    [(ngModel)]="config.rootNodes"
    (onSelected)="onUpdate.emit()"
    name="rootNodes"
  ></c8y-asset-selector>
</div>