<div class="col-sm-6">
  <label
    title="{{ 'Current top level nodes' | translate }}"
    translate
  >
    Current top level nodes
  </label>
  <c8y-list-group class="separator-top">
    @if (config.rootNodes.length === 0) {
      <c8y-li>
        <c8y-ui-empty-state
          [icon]="'folder-open'"
          [title]="'No top level nodes set.' | translate"
          [horizontal]="true"
        ></c8y-ui-empty-state>
      </c8y-li>
    }
    @for (node of config.rootNodes; track node.id; let index = $index) {
      <c8y-li>
        @if (node.id | getGroupIcon | async; as icon) {
          <c8y-li-icon [icon]="icon"></c8y-li-icon>
        } @else {
          <c8y-li-icon
            class="icon-spin loadingIndicator"
            [icon]="'circle-o-notch'"
          ></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
                name="node.{{ index }}.hideDevices"
                type="checkbox"
                [(ngModel)]="node.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"
                [attr.aria-label]="'Remove' | translate"
                tooltip="{{ 'Remove' | translate }}"
                type="button"
                [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
    class="border-top d-block"
    name="rootNodes"
    [config]="{ groupsOnly: true, multi: true, groupsSelectable: true }"
    [(ngModel)]="config.rootNodes"
    [disabled]="disabled"
    (onSelected)="onUpdate.emit()"
  ></c8y-asset-selector>
</div>