@if (appearance?.displayDensity === 'cosy' || appearance?.displayDensity === 'compact') {
  <label>{{label()}}</label>
}
<ngm-tree-select class="flex-1 max-w-full"
  [appearance]="appearance?.appearance"
  [floatLabel]="appearance?.floatLabel"
  [color]="appearance?.color"
  [displayBehaviour]="displayBehaviour"
  [displayDensity]="appearance?.displayDensity"
  [label]="label()"
  [placeholder]="options?.placeholder"
  [treeNodes]="data || (treeData$ | async)"
  [initialLevel]="options?.initialLevel"
  [multiple]="options?.multiple"
  [maxTagCount]="options?.maxTagCount"
  [virtualScroll]="options?.virtualScroll"
  [autocomplete]="options?.autocomplete"
  [searchable]="options?.searchable"
  [panelWidth]="options?.panelWidth"
  [autoActiveFirstOption]="options?.autoActiveFirst"
  [autoSelectActiveOption]="options?.autoSelectActive"
  [disabled]="disabled"
  [ngModel]="memberKeys()"
  (ngModelChange)="onModelChange($event)"
  (focus)="onFocus($event)"
  >
  <div zFormSuffix style="display: flex; align-items: center;">
    @if (loading$ | async) {
      <z-loader diameter="20" />
    }
    @if (hierarchies()?.length > 1) {
      <button
        z-button
        zType="ghost"
        zSize="icon"
        zShape="circle"
        class="ngm-actionable-opacity"
        z-menu
        [zMenuTriggerFor]="hierarchiesMenu"
        #mt="zMenuTrigger"
        [class.active]="mt.menuOpen"
        (click)="$event.stopPropagation();$event.preventDefault();"
        >
        <z-icon zType="account_tree"></z-icon>
      </button>
    }

    <button z-button zType="ghost" zSize="icon" zShape="circle" type="button" [disabled]="disabled" class="ngm-smart-filter__help ngm-actionable-opacity" (click)="$event.stopPropagation();$event.preventDefault();openValueHelp($event)">
      <z-icon zType="help_outline"></z-icon>
    </button>
  </div>
</ngm-tree-select>

<z-radio-group [(ngModel)]="hierarchy">
  <ng-template #hierarchiesMenu>
    <div z-menu-content class="ngm-radio-menu">
      @for (property of hierarchies(); track property.name) {
        <button
          type="button"
          z-menu-item
          class="w-full"
          (click)="$event.stopPropagation();">
          <z-radio class="flex-1" [value]="property.name">
            <ngm-property class="flex-1" hiddenIcon [property]="property" [displayBehaviour]="DisplayBehaviour.auto" />
          </z-radio>
        </button>
      }
    </div>
  </ng-template>
</z-radio-group>