@let poHelper = setHelper(label, additionalHelpTooltip);
<po-field-container
  [p-disabled]="isDisabled"
  [p-id]="id"
  [p-label]="label"
  [p-optional]="optional"
  [p-required]="required"
  [p-show-required]="showRequired"
  [p-helper]="label ? poHelper.helperSettings : undefined"
  [p-show-helper]="label ? displayAdditionalHelp : undefined"
  [p-size]="size"
  [p-text-wrap]="labelTextWrap()"
>
  <div class="po-field-container-content" [attr.p-size]="size">
    <div class="po-select-container">
      <select
        #select
        class="po-select po-select-phosphor"
        [class.po-select-aa]="size === 'small'"
        [class.po-select-loading]="loading"
        [class.po-select-placeholder]="!selectedValue?.toString() && !!placeholder"
        [attr.data-focused-element]="!isDisabled"
        [attr.data-inactive-component]="disabled || readonly || loading"
        [attr.name]="name"
        [disabled]="isDisabled"
        [id]="id"
        [required]="required"
        (blur)="onBlur($event)"
        (change)="onSelectChange($event.target.value)"
        (keydown)="onKeyDown($event)"
      >
        @if (!isSafari) {
          @if (!selectedValue?.toString() || !!placeholder) {
            <option
              [disabled]="!!placeholder"
              [hidden]="!selectedValue?.toString() && !placeholder"
              [selected]="!selectedValue?.toString()"
              [value]="placeholder ?? ''"
            >
              {{ placeholder }}
            </option>
          }
          <option [hidden]="true">{{ displayValue }}</option>
        }

        @if (isSafari) {
          <option>{{ displayValue || placeholder }}</option>
        }

        @if (optionWithoutGroup.length > 0) {
          @for (item of optionWithoutGroup; track item) {
            <option [disabled]="readonly" [value]="item?.[this.fieldValue]">
              {{ item?.[this.fieldLabel] }}
            </option>
          }
        }
        @if (listGroupOptions.length > 0) {
          @for (item of listGroupOptions; track item) {
            @if (item?.options.length > 0) {
              <optgroup label="{{ item?.label }}" [disabled]="readonly">
                @for (subItem of item.options; track subItem) {
                  <option [value]="subItem?.[this.fieldValue]" [disabled]="readonly">
                    {{ subItem?.[this.fieldLabel] }}
                  </option>
                }
              </optgroup>
            }
          }
        }
      </select>

      @if (loading) {
        <div
          class="po-field-icon-container-right"
          [class.po-select-loading-with-helper]="
            (!this.label && poHelperComponent()) || (!this.label && poHelper.hideAdditionalHelp)
          "
        >
          <po-loading-icon [p-size]="mapSizeToIcon(size)"></po-loading-icon>
        </div>
      }

      @if ((!this.label && poHelperComponent()) || (!this.label && poHelper.hideAdditionalHelp)) {
        <po-helper
          #helperEl
          class="po-field-helper-button"
          [p-size]="size"
          [p-helper]="poHelper.helperSettings"
          [p-disabled]="isDisabled"
          [p-append-in-body]="appendBox"
        >
        </po-helper>
      }
    </div>
  </div>

  @if (!readonly) {
    <po-field-container-bottom
      [p-append-in-body]="appendBox"
      [p-help]="help"
      [p-disabled]="isDisabled"
      [p-error-pattern]="getErrorPattern()"
      [p-error-limit]="errorLimit"
      [p-size]="size"
    ></po-field-container-bottom>
  }
</po-field-container>