<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">
      <c8y-ui-empty-state
        [icon]="'folder-open'"
        [title]="'No top level nodes set.' | translate"
        [horizontal]="true"
      ></c8y-ui-empty-state>
    </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 d-flex" title="{{ 'Hide devices' | translate }}">
            <input
              type="checkbox"
              [(ngModel)]="node.hideDevices"
              name="node.{{ index }}.hideDevices"
              (change)="onUpdate.emit()"
              [disabled]="disabled"
            />
            <span></span>
            <small class="text-truncate a-s-center l-h-1">{{ 'Hide devices' | translate }}</small>
          </label>
        </div>
        <div class="col-2 text-right">
          <div class="d-flex fit-w">
            <button
              class="btn-dot btn-dot--danger m-l-auto"
              type="button"
              [attr.aria-label]="'Remove' | translate"
              tooltip="{{ 'Remove' | translate }}"
              [disabled]="disabled"
              [delay]="500"
              (click)="removeNavigatorNode(node)"
            >
              <i c8yIcon="minus-circle"></i>
            </button>
          </div>
        </div>
      </div>
    </c8y-li>
  </c8y-list-group>
</div>

<div class="col-sm-6 col-md-5" style="height: calc(100vh - 430px)">
  <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"
    [disabled]="disabled"
    (onSelected)="onUpdate.emit()"
    name="rootNodes"
    class="border-top d-block"
  ></c8y-asset-selector>
</div>