<div class="quick-access">
  <button
    mat-icon-button
    (click)="quickAccessBtnClick($event, 1)"
    [matTooltip]="T.F.TASK.D_SCHEDULE_TASK.QA_TODAY | translate"
  >
    <mat-icon>wb_sunny</mat-icon>
  </button>

  <button
    mat-icon-button
    (click)="quickAccessBtnClick($event, 2)"
    [matTooltip]="T.F.TASK.D_SCHEDULE_TASK.QA_TOMORROW | translate"
  >
    <mat-icon svgIcon="tomorrow"></mat-icon>
  </button>
  <button
    mat-icon-button
    (click)="quickAccessBtnClick($event, 3)"
    [matTooltip]="T.F.TASK.D_SCHEDULE_TASK.QA_NEXT_WEEK | translate"
  >
    <mat-icon svgIcon="next_week"></mat-icon>
  </button>
  <button
    mat-icon-button
    (click)="quickAccessBtnClick($event, 4)"
    [matTooltip]="T.F.TASK.D_SCHEDULE_TASK.QA_NEXT_MONTH | translate"
  >
    <mat-icon>bedtime</mat-icon>
  </button>
</div>

<mat-dialog-content>
  @if (isConfigReady()) {
    <mat-calendar
      (keydown)="onKeyDownOnCalendar($event)"
      [selected]="selectedDate"
      [minDate]="minDate"
      (selectedChange)="dateSelected($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="example-full-width">
      <mat-label>Time</mat-label>
      <mat-icon matPrefix>schedule</mat-icon>
      <input
        type="time"
        (focus)="onTimeFocus()"
        [(ngModel)]="selectedTime"
        step="60"
        matInput
        (keydown)="onTimeKeyDown($event)"
      />
      @if (selectedTime) {
        <mat-icon
          style="cursor: pointer"
          matSuffix
          (click)="onTimeClear($event)"
          >close
        </mat-icon>
      }
    </mat-form-field>

    @if (selectedTime) {
      <mat-form-field [@expandFade]>
        <mat-icon matPrefix>alarm</mat-icon>
        <mat-label>{{ T.F.TASK.D_SCHEDULE_TASK.REMIND_AT | translate }}</mat-label>
        <mat-select
          [(ngModel)]="selectedReminderCfgId"
          name="type"
          required="true"
        >
          @for (remindOption of remindAvailableOptions; track remindOption.value) {
            <mat-option [value]="remindOption.value">
              {{ remindOption.label | translate }}
            </mat-option>
          }
        </mat-select>
      </mat-form-field>
    }

    <mat-dialog-actions align="start">
      <div class="schedule-actions">
        @if (data.task && (data.task.dueWithTime || plannedDayForTask)) {
          <button
            (click)="remove()"
            color="warn"
            mat-stroked-button
          >
            @if (selectedTime) {
              <mat-icon>alarm_off</mat-icon>
            } @else {
              <mat-icon>event_busy</mat-icon>
            }
            {{ T.F.TASK.D_SCHEDULE_TASK.UNSCHEDULE | translate }}
          </button>
        }
        <button
          color="primary"
          mat-stroked-button
          (click)="submit()"
        >
          @if (selectedTime) {
            <mat-icon>alarm</mat-icon>
          } @else {
            <mat-icon>today</mat-icon>
          }
          {{ T.F.TASK.D_SCHEDULE_TASK.SCHEDULE | translate }}
        </button>
      </div>
      <button
        class="dialog-cancel-btn"
        mat-stroked-button
        color="default"
        (click)="close()"
      >
        {{ T.G.CANCEL | translate }}
      </button>
    </mat-dialog-actions>
  </div>
</mat-dialog-content>
