@if (hasTooltip) {
  <div
    class="sky-daypicker-cell"
    skyPopoverPlacement="left"
    [attr.aria-label]="getKeyDateLabel()"
    [skyPopover]="dayInfoPopover"
    [skyPopoverMessageStream]="popoverController"
    (mouseenter)="onDayMouseenter()"
    (mouseleave)="onDayMouseleave()"
  >
    <ng-container *ngTemplateOutlet="daypickerButtonTemplateRef" />
    <sky-popover
      #dayInfoPopover
      (popoverClosed)="onPopoverClosed()"
      (popoverOpened)="onPopoverOpened()"
    >
      @for (text of date?.keyDateText; track text) {
        <div>
          {{ text }}
        </div>
      }
    </sky-popover>
  </div>
} @else {
  <div
    class="sky-daypicker-cell"
    (mouseenter)="onDayMouseenter()"
    (mouseleave)="onDayMouseleave()"
  >
    <ng-container *ngTemplateOutlet="daypickerButtonTemplateRef" />
  </div>
}

<ng-template #daypickerButtonTemplateRef>
  <sky-daypicker-button [date]="date" />
</ng-template>