@if (isRange) {
  <div class="po-calendar-range">
    <ng-container *ngTemplateOutlet="calendarWrapper; context: { partType: 'start' }"></ng-container>
    @if (!isResponsive) {
      <ng-container *ngTemplateOutlet="calendarWrapper; context: { partType: 'end' }"></ng-container>
    }
  </div>
} @else {
  <div class="po-calendar">
    <ng-template [ngTemplateOutlet]="calendarWrapper"></ng-template>
  </div>
}

<ng-template #calendarWrapper let-partType="partType">
  <po-calendar-wrapper
    [p-value]="getValue(partType)"
    [p-activate-date]="getActivateDate(partType)"
    [p-locale]="locale"
    [p-min-date]="minDate"
    [p-max-date]="maxDate"
    [p-part-type]="partType"
    [p-range]="isRange"
    [p-responsive]="isResponsive"
    [p-selected-value]="value"
    [p-hover-value]="hoverValue"
    (p-header-change)="onHeaderChange($event, partType)"
    (p-select-date)="onSelectDate($event, partType)"
    (p-hover-date)="onHoverDate($event)"
  >
  </po-calendar-wrapper>
</ng-template>