<div style="position: relative; width: 100%">
    <div class="loading-spinner-wrapper"
         [style.display]="isLoading() ? 'flex' : 'none'"
    >
        <app-loading-spinner [isLoading]="isLoading()" />
    </div>

    <mat-form-field appearance="outline"
                    [formGroup]="parentFormGroup"
                    [floatLabel]="floatLabel"
    >
        @if (label) {
            <mat-label>{{ label }}</mat-label>
        }
        <mat-select #fieldCtrl
                    [multiple]="isSupercombo"
                    [formControlName]="name"
                    [placeholder]="placeholder"
                    (valueChange)="onValueChanged.emit($event)"
        >
            @if (isSupercombo && valuesSeparator !== ',') {
                <mat-select-trigger>
                    <span>{{ getSelectedItemsDisplayValue() }}</span>
                </mat-select-trigger>
            }

            <!--@if (searchRequired && !EmsowAngular.isEmpty(data)) {
                <mat-option>
                    <ngx-mat-select-search [formControl]="searchCtrl"
                                           [noEntriesFoundLabel]="searchNothingFoundMessage"
                                           [placeholderLabel]="searchTooltip"
                                           [showToggleAllCheckbox]="showToggleAllCheckbox"
                                           (toggleAll)="onToggleAll($event)"
                                           [toggleAllCheckboxTooltipMessage]="toggleAllTooltip"
                    >
                        <mat-icon ngxMatSelectSearchClear
                                  class="material-symbols-outlined"
                        >
                            close
                        </mat-icon>
                    </ngx-mat-select-search>
                </mat-option>
            }-->

            @if (emptyOptionRequired) {
                <mat-option><span class="option">{{ emptyOptionLabel }}</span></mat-option>
            }

            <mat-option *ngFor="let record of filteredRecords()"
                        [value]="record"
            >
                <span class="option">{{ record.displayValue }}</span>
            </mat-option>
        </mat-select>

        @if (isAddNewEntity) {
            <app-icon-button matSuffix
                             icon="add"
                             (onClickEvent)="onAddNewEntity($event)"
            />
        }

        @if (clearBtnRequired && getValue() && !EmsowAngular.isEmpty(getValue())) {
            <app-icon-button matSuffix
                             icon="close"
                             (onClickEvent)="clear($event)"
            />
        }
    </mat-form-field>
</div>