<!-- input and stuff-->
<div cdkOverlayOrigin #fallbackOrigin="cdkOverlayOrigin" class="nx-dropdown__container" #trigger [nxTooltip]="_tooltipText">
    <div class="nx-dropdown__rendered" [id]="renderedValueId">
        @if (empty && placeholder) {
        <span>{{ placeholder }}</span>
        } @if (!empty) {
        <ng-container *ngTemplateOutlet="closedDropdownLabel"></ng-container>
        }
    </div>
    <div class="nx-dropdown__icon">
        <nx-icon class="nx-dropdown__chevron" name="chevron-down" aria-hidden="true"></nx-icon>
    </div>
</div>

<ng-template #defaultClosedDropdownLabel>
    @if (triggerValue) {
    <span>{{ triggerValue }}</span>
    }
</ng-template>

<!-- overlay -->
<ng-template
    cdkConnectedOverlay
    cdkConnectedOverlayHasBackdrop
    cdkConnectedOverlayBackdropClass="cdk-overlay-transparent-backdrop"
    [cdkConnectedOverlayScrollStrategy]="_scrollStrategy"
    [cdkConnectedOverlayOrigin]="overlayOrigin"
    [cdkConnectedOverlayOpen]="panelOpen"
    [cdkConnectedOverlayPositions]="_positions"
    [cdkConnectedOverlayWidth]="_overlayWidth"
    [cdkConnectedOverlayMinWidth]="_overlayMinWidth"
    [cdkConnectedOverlayFlexibleDimensions]="true"
    [cdkConnectedOverlayViewportMargin]="_overlayViewportMargin"
    [cdkConnectedOverlayPush]="false"
    (backdropClick)="closePanel()"
    (attach)="_onAttached()"
    (detach)="closePanel()"
>
    <div
        class="nx-dropdown__panel"
        [class.has-filter]="showFilter"
        [class.nx-dropdown__panel--in-outline-field]="_isInOutlineField"
        [class.centered-checkmark]='verticalAlignCheckmark === "center"'
        (keydown)="_handleKeydown($event)"
        [dir]="dir"
        #panel
    >
        @if (label) {
        <div class="nx-dropdown__panel-header">{{ label }}</div>
        } @if (showFilter) {
        <div class="nx-dropdown__filter">
            <input
                class="nx-dropdown__filter-input"
                [class.is-filled]="!isFilterEmpty"
                #filterInput
                [type]="filterInputType"
                (input)="_onFilter($event)"
                [placeholder]="filterPlaceholder"
            />
            @if (!isFilterEmpty) {
            <span class="nx-dropdown__filter-icon" (click)="_clearFilter()">
                <nx-icon name="close"></nx-icon>
            </span>
            }
        </div>
        }

        <div
            class="nx-dropdown__panel-body"
            tabindex="-1"
            role="listbox"
            [id]="modalId"
            [class.keyboard-focused]="openedByKeyboard"
            #panelBody
            [attr.aria-activedescendant]="_getAriaActiveDescendant()"
            [attr.aria-multiselectable]="isMultiSelect"
        >
            <ng-content></ng-content>
            @for (option of options; track option) {
            <nx-dropdown-item (onSelectionChange)="_onSelect($event.item, $event.isUserInput, option)" [value]="option.value"
                >{{ _getLabel(option) }}</nx-dropdown-item
            >
            }
        </div>
    </div>
</ng-template>
