<app-form-field
  [label]="label()"
  [inputId]="resolvedInputId()"
  [control]="control()"
  [required]="required()"
  [disabled]="isDisabled()"
  [description]="description()"
  [hint]="hint()"
  [floating]="isFloating()"
  [forceFloat]="shouldFloat()"
  [labelPosition]="labelPosition()"
  [hideLabel]="hideLabel()"
  [hideValidation]="hideValidation()"
  [showValidationWhenDirty]="showValidationWhenDirty()"
  [submitAttempted]="submitAttempted()"
  [validationMessages]="validationMessages()"
  [wrapperClass]="(isFloating() ? 'form-select-floating ' : '') + wrapperClass()"
  [labelClass]="labelClass()"
  [contentClass]="fieldContentClass()"
>
  <ng-select
    #select
    bindLabel="label"
    bindValue="value"
    appearance="outline"
    [items]="selectItems()"
    [ngModel]="modelValue()"
    [multiple]="isMultiple()"
    [searchable]="false"
    [editableSearchTerm]="resolvedEditableSearchTerm()"
    [clearable]="clearable()"
    [hideSelected]="hideSelected()"
    [closeOnSelect]="resolvedCloseOnSelect()"
    [maxSelectedItems]="maxSelectedItems()"
    [placeholder]="resolvedPlaceholder()"
    [loading]="loading()"
    [loadingText]="loadingText()"
    [notFoundText]="notFoundText()"
    [typeToSearchText]="typeToSearchText()"
    [clearAllText]="clearAllText()"
    [appendTo]="appendTo()"
    [dropdownPosition]="dropdownPosition()"
    [virtualScroll]="virtualScroll()"
    [bufferAmount]="bufferAmount()"
    [groupBy]="groupBy()"
    [selectableGroup]="selectableGroup()"
    [selectableGroupAsModel]="selectableGroupAsModel()"
    [selectOnTab]="selectOnTab()"
    [clearOnBackspace]="clearOnBackspace()"
    [readonly]="resolvedReadonly()"
    [labelForId]="resolvedInputId()"
    [inputAttrs]="inputAttrs()"
    [ariaLabel]="ariaLabel() || label() || resolvedPlaceholder()"
    [ngClass]="resolvedSelectClass()"
    (ngModelChange)="onValueChange($event)"
    (open)="onOpen()"
    (close)="onClose()"
    (focus)="onFocus()"
    (blur)="onBlur()"
    (clear)="onClear()"
    (scroll)="onScroll($event)"
    (scrollToEnd)="onScrollToEnd()"
  >
    @if (showDropdownHeader()) {
      <ng-template ng-header-tmp>
        @if (searchable()) {
          <div class="w-full">
            <input
              type="search"
              class="form-control form-control-sm w-full rounded-sm border-defaultborder text-defaulttextcolor dark:border-defaultborder/10 dark:text-white/70"
              [value]="searchTerm()"
              [placeholder]="resolvedSearchPlaceholder()"
              [disabled]="isDisabled()"
              autocomplete="off"
              (input)="onSearchInput($event)"
              (keydown)="$event.stopPropagation()"
            />
          </div>
        }

        @if (isMultiple() && showSelectAll()) {
          <button
            type="button"
            class="flex w-full items-center gap-2 border-b border-defaultborder px-3 py-2 text-start text-[0.8125rem] text-defaulttextcolor hover:bg-light dark:border-defaultborder/10 dark:text-white/70 dark:hover:bg-black/20"
            [class.text-primary]="allSelected() || partiallySelected()"
            [disabled]="isDisabled()"
            (click)="toggleSelectAll()"
          >
            @if (showCheckboxes()) {
              <span
                class="flex size-4 shrink-0 items-center justify-center rounded-sm border border-defaultborder bg-white text-[0.625rem] dark:border-defaultborder/10 dark:bg-bodybg"
                [class.bg-primary]="allSelected() || partiallySelected()"
                [class.text-white]="allSelected() || partiallySelected()"
                aria-hidden="true"
              >
                @if (allSelected()) {
                  <i class="ri-check-line leading-none"></i>
                } @else if (partiallySelected()) {
                  <i class="ri-subtract-line leading-none"></i>
                }
              </span>
            }

            <span class="min-w-0 flex-1 truncate">
              {{ selectAllLabel() }}
            </span>
          </button>
        }
      </ng-template>
    }

    <ng-template ng-option-tmp let-item="item" let-item$="item$">
      <div [class]="getOptionContainerClass(item)">
        @if (isMultiple() && showCheckboxes()) {
          <span
            class="mt-0.5 flex size-4 shrink-0 items-center justify-center rounded-sm border border-defaultborder bg-white text-[0.625rem] dark:border-defaultborder/10 dark:bg-bodybg"
            [class.bg-primary]="isOptionSelected(item)"
            [class.text-white]="isOptionSelected(item)"
            aria-hidden="true"
          >
            @if (isOptionSelected(item)) {
              <i class="ri-check-line leading-none"></i>
            }
          </span>
        }

        @if (item.prefixText) {
          <span [class]="getOptionPrefixClass(item)">
            {{ item.prefixText }}
          </span>
        }

        <span class="min-w-0 flex-1">
          <span [class]="getOptionLabelClass(item)">
            {{ getOptionDisplayLabel(item, item$.label) }}
          </span>

          @if (item.description) {
            <span class="mt-0.5 block truncate text-[0.75rem] text-inherit opacity-80">
              {{ item.description }}
            </span>
          }
        </span>
      </div>
    </ng-template>

    <ng-template ng-label-tmp let-item="item" let-clear="clear" let-label="label">
      <span class="inline-flex min-w-0 items-center gap-1">
        @if (getSelectionPrefixText(item)) {
          <span class="shrink-0 text-primary">
            {{ getSelectionPrefixText(item) }}
          </span>
        }

        <span class="truncate">
          {{ getSelectionDisplayLabel(item, label) }}
        </span>

        @if (isMultiple() && clearable() && !resolvedReadonly()) {
          <button
            type="button"
            class="ms-1 inline-flex text-white/80 hover:text-white"
            aria-label="Remove selected option"
            (click)="clear(item)"
          >
            <i class="ri-close-line leading-none"></i>
          </button>
        }
      </span>
    </ng-template>

    @if (isMultiple()) {
      <ng-template ng-multi-label-tmp let-items="items" let-clear="clear">
        <div class="flex min-w-0 items-center gap-1">
          @if (items.length > 0) {
            <span class="inline-flex max-w-full items-center gap-1 rounded-sm bg-primary px-2 py-0.5 text-[0.75rem] text-white">
              <span class="truncate">
                {{ getMultiLabelText(items) }}
              </span>

              @if (clearable() && !resolvedReadonly()) {
                <button
                  type="button"
                  class="inline-flex text-white/80 hover:text-white"
                  aria-label="Remove selected option"
                  (click)="clear(items[0])"
                >
                  <i class="ri-close-line leading-none"></i>
                </button>
              }
            </span>
          }
        </div>
      </ng-template>
    }

    @if (isMultiple() && showMultiSelectFooter()) {
      <ng-template ng-footer-tmp>
        <div class="flex items-center justify-between gap-2 border-t border-defaultborder px-3 py-2 dark:border-defaultborder/10">
          <span class="text-[0.75rem] text-textmuted">
            {{ pendingValue().length }} selected
          </span>

          <span class="inline-flex items-center gap-2">
            <button
              type="button"
              class="ti-btn ti-btn-light !px-3 !py-1.5 !text-[0.75rem]"
              (click)="cancelSelection(select)"
            >
              {{ cancelLabel() }}
            </button>

            <button
              type="button"
              class="ti-btn ti-btn-primary-full !px-3 !py-1.5 !text-[0.75rem]"
              (click)="confirmSelection(select)"
            >
              {{ confirmLabel() }}
            </button>
          </span>
        </div>
      </ng-template>
    }
  </ng-select>
</app-form-field>
