@let poHelper = setHelper(label, additionalHelpTooltip);
<po-field-container
  [p-disabled]="disabled"
  [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 #outerContainer>
    <div
      cdkOverlayOrigin
      #trigger="cdkOverlayOrigin"
      class="po-field-container-content po-field-container-content-datepicker"
      [attr.p-size]="size"
    >
      <div class="po-field-container-input">
        <input
          #inp
          class="po-input po-datepicker"
          [class.po-input-icon-right]="clean && inp.value"
          [class.po-input-icon-right-aa]="clean && inp.value && size === 'small'"
          [class.po-input-aa]="size === 'small'"
          type="text"
          [attr.data-focused-element]="!disabled"
          [attr.data-inactive-component]="disabled || readonly"
          [attr.name]="name"
          [autocomplete]="autocomplete"
          [disabled]="disabled"
          [id]="id"
          [placeholder]="disabled ? '' : placeholder"
          [readonly]="readonly"
          [required]="required"
          [attr.data-append-in-body]="appendBox"
          (blur)="eventOnBlur($event)"
          (click)="eventOnClick($event)"
          (keydown)="onKeyDown($event)"
          (keydown.tab)="handleCleanKeyboardTab($event)"
        />
        <div class="po-field-icon-container-right">
          @if (clean && !disabled && !readonly) {
            <po-clean class="po-icon-input" [p-element-ref]="inputEl" [p-size]="size" (p-change-event)="clear()">
            </po-clean>
          }
        </div>
      </div>
      <po-button
        #iconDatepicker
        class="po-datepicker-button"
        [class.po-datepicker-button-aa]="size === 'small'"
        p-icon="ICON_CALENDAR"
        p-kind="tertiary"
        [p-disabled]="disabled || readonly"
        [p-size]="size"
        (keydown)="onKeyPress($event)"
        (keydown.tab)="handleCleanKeyboardTab($event)"
        (p-click)="togglePicker()"
      >
      </po-button>
      @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]="disabled"
          [p-append-in-body]="appendBox"
        >
        </po-helper>
      }
    </div>

    @if (appendBox) {
      <ng-template
        cdkConnectedOverlay
        [cdkConnectedOverlayOrigin]="trigger"
        [cdkConnectedOverlayOpen]="true"
        [cdkConnectedOverlayDisableClose]="true"
      >
        <ng-container *ngTemplateOutlet="sharedCalendarContent"></ng-container>
      </ng-template>
    } @else {
      <ng-container *ngTemplateOutlet="sharedCalendarContent"></ng-container>
    }

    <ng-template #sharedCalendarContent>
      <div #dialogPicker [class.po-datepicker-popup-calendar]="!verifyMobile()" tabindex="-1" [hidden]="!visible">
        @if (verifyMobile()) {
          <div class="po-datepicker-calendar-overlay"></div>
        }
        <po-calendar
          #calendar
          [class.po-datepicker-calendar-mobile]="verifyMobile()"
          [(ngModel)]="date"
          [p-max-date]="maxDate"
          [p-min-date]="minDate"
          [p-locale]="locale"
          (p-change)="dateSelected()"
          (keydown)="onCalendarKeyDown($event)"
        ></po-calendar>
      </div>
    </ng-template>
  </div>

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