@if (showQuickAccess()) {
  <div class="quick-access">
    <button
      mat-icon-button
      type="button"
      (click)="quickAccessBtnClick($event, 'today')"
      [matTooltip]="quickAccessTranslationPrefix() + '.QA_TODAY' | translate"
    >
      <mat-icon>wb_sunny</mat-icon>
    </button>

    <button
      mat-icon-button
      type="button"
      (click)="quickAccessBtnClick($event, 'tomorrow')"
      [matTooltip]="quickAccessTranslationPrefix() + '.QA_TOMORROW' | translate"
    >
      <mat-icon>wb_twilight</mat-icon>
    </button>
    <button
      mat-icon-button
      type="button"
      (click)="quickAccessBtnClick($event, 'nextWeek')"
      [matTooltip]="quickAccessTranslationPrefix() + '.QA_NEXT_WEEK' | translate"
    >
      <mat-icon>next_week</mat-icon>
    </button>
    <button
      mat-icon-button
      type="button"
      (click)="quickAccessBtnClick($event, 'nextMonth')"
      [matTooltip]="quickAccessTranslationPrefix() + '.QA_NEXT_MONTH' | translate"
    >
      <mat-icon>bedtime</mat-icon>
    </button>
  </div>
}

@if (isConfigReady()) {
  <mat-calendar
    (keydown)="onKeyDownOnCalendar($event)"
    [selected]="selectedDate()"
    [minDate]="minDate()"
    (selectedChange)="dateSelected.emit($event)"
  ></mat-calendar>
}

@if (isShowEnterMsg) {
  <div
    class="press-enter-msg"
    @fade
  >
    {{ T.DATETIME_SCHEDULE.PRESS_ENTER_AGAIN | translate }}
  </div>
}

<div class="form-ctrl-wrapper">
  <mat-form-field class="time-form-field">
    <mat-label>{{ timeLabel() }}</mat-label>
    <mat-icon matPrefix>schedule</mat-icon>
    <input
      type="time"
      spTimeStep
      (focus)="onTimeFocus()"
      [ngModel]="selectedTime()"
      (ngModelChange)="onTimeChange($event)"
      step="60"
      matInput
      (keydown)="onTimeKeyDown($event)"
    />
    @if (selectedTime()) {
      <mat-icon
        class="time-clear-btn"
        matSuffix
        (click)="onTimeClear($event)"
        >close
      </mat-icon>
    }
  </mat-form-field>

  @if (selectedTime()) {
    <mat-form-field
      [@expandFade]
      class="reminder-form-field"
    >
      <mat-icon matPrefix>alarm</mat-icon>
      <mat-label>{{ reminderLabel() | translate }}</mat-label>
      <mat-select
        [ngModel]="selectedReminderCfgId()"
        (ngModelChange)="onReminderChange($event)"
        name="type"
        required="true"
      >
        @for (remindOption of reminderOptions(); track remindOption.value) {
          <mat-option [value]="remindOption.value">
            {{ remindOption.label | translate }}
          </mat-option>
        }
      </mat-select>
    </mat-form-field>
  }
</div>