@if (datepickerMode) {
  <div class="sky-datepicker-calendar-inner">
    <div class="sky-datepicker-calendar-header">
      <span class="sky-datepicker-header-left">
        <button
          type="button"
          class="sky-btn sky-btn-default sky-btn-sm sky-datepicker-btn-previous"
          [attr.aria-label]="previousLabel"
          (click)="moveCalendar($event, -1)"
        >
          <sky-icon class="sky-datepicker-chevron" icon="chevron-left" />
        </button>
      </span>
      <span class="sky-datepicker-header-center">
        <!-- display: inline -->
        <button
          type="button"
          class="sky-btn sky-btn-default sky-btn-sm sky-datepicker-calendar-title"
          [id]="datepickerId + '-title'"
          [disabled]="datepickerMode === maxMode"
          [ngClass]="{
            'sky-btn-disabled': datepickerMode === maxMode
          }"
          (click)="toggleModeCalendar($event)"
          >{{ title }}</button
        >
      </span>
      <span class="sky-datepicker-header-right">
        <button
          type="button"
          class="sky-btn sky-btn-default sky-btn-sm sky-datepicker-btn-next"
          [attr.aria-label]="nextLabel"
          (click)="moveCalendar($event, 1)"
        >
          <sky-icon class="sky-datepicker-chevron" icon="chevron-right" />
        </button>
      </span>
    </div>
    <ng-content />
  </div>
}