@let poHelper = setHelper(label, additionalHelpTooltip);
<po-field-container
  [class.po-date-picker-container-disabled]="disabled"
  [p-disabled]="disabled"
  [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-field-container-input">
      <div
        #dateRangeField
        class="po-datepicker-range-field po-input"
        [class.po-input-aa]="size === 'small'"
        [class.po-datepicker-range-field-disabled]="disabled"
        [attr.disabled]="disabled"
      >
        <div class="po-datepicker-range-start-date" [class.po-datepicker-range-start-date-aa]="size === 'small'">
          <input
            #startDateInput
            class="po-datepicker-range-input"
            maxlength="10"
            type="text"
            [attr.aria-label]="label"
            [autocomplete]="autocomplete"
            [disabled]="disabled"
            [name]="startDateInputName"
            [readonly]="readonly"
            (blur)="onBlur($event)"
            (focus)="onFocus($event)"
            (keydown)="onKeydown($event)"
            (keyup)="onKeyup($event)"
            (click)="eventOnClick($event)"
          />
        </div>

        <div class="po-datepicker-range-separator">-</div>

        <div class="po-datepicker-range-end-date">
          <input
            #endDateInput
            class="po-datepicker-range-input"
            maxlength="10"
            type="text"
            [autocomplete]="autocomplete"
            [disabled]="disabled"
            [name]="endDateInputName"
            [readonly]="readonly"
            (blur)="onBlur($event)"
            (focus)="onFocus($event)"
            (keydown)="onKeydown($event)"
            (keyup)="onKeyup($event)"
            (click)="eventOnClick($event)"
          />
        </div>

        <div class="po-datepicker-range-icon">
          @if (enableCleaner) {
            <po-clean [p-size]="size" (p-change-event)="clear()"></po-clean>
          }
        </div>

        <div class="po-datepicker-range-icon">
          <po-icon
            #iconCalendar
            [p-icon]="!disabled || !readonly ? 'ICON_CALENDAR po-clickable' : 'ICON_CALENDAR'"
            class="po-field-icon {{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}"
            [class.po-field-icon-disabled]="disabled || readonly"
            [class.po-field-icon-aa]="size === 'small'"
            (click)="toggleCalendar()"
          >
          </po-icon>
        </div>
      </div>
    </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]="disabled"
        [p-append-in-body]="appendBox"
      >
      </po-helper>
    }
  </div>

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

@if (isCalendarVisible) {
  <div #calendarPicker class="po-calendar-range-picker">
    <po-calendar
      p-mode="range"
      [ngModel]="dateRange"
      [p-max-date]="maxDate"
      [p-min-date]="minDate"
      [p-locale]="locale"
      (ngModelChange)="onCalendarChange($event)"
    ></po-calendar>
  </div>
}