<div
  class="time"
  (click)="isForDayMode.set(!isForDayMode())"
>
  @if (!isForDayMode()) {
    <mat-icon>alarm</mat-icon>
    <span [innerHTML]="due() | shortTimeHtml"></span>
  } @else {
    <mat-icon>today</mat-icon>
    <span>{{ date() | localeDate: 'shortDate' : undefined : locale() }} </span>
  }
</div>

@if (!isEditMode()) {
  <div class="msg">
    <mat-icon>add</mat-icon>
    {{ T.F.SCHEDULE.CLICK_TO_CREATE_TASK | translate }}
  </div>
} @else {
  <div class="task-input-container">
    <!-- Select task minimal component -->
    <select-task-minimal
      #selectTaskMinimal
      (taskSelected)="onTaskSelected($event)"
      (textChanged)="onTextChanged($event)"
      (blurred)="onSimpleTaskInputBlur()"
      (keyPressed)="onSelectTaskKeyDown($event)"
      (autocompleteOpened)="onAutocompleteOpened()"
      (autocompleteClosed)="onAutocompleteClosed()"
      [placeholder]="
        (isForDayMode()
          ? T.F.SCHEDULE.PLAN_TASK_FOR_DAY_PLACEHOLDER
          : T.F.SCHEDULE.SCHEDULE_TASK_PLACEHOLDER
        ) | translate
      "
      [isIncludeDoneTasks]="false"
      [isLimitToProject]="false"
    ></select-task-minimal>

    <!-- Mode toggle hint -->
    <div class="mode-hint">
      <small>
        {{
          (isForDayMode()
            ? T.F.SCHEDULE.TOGGLE_TIME_SCHEDULING_HINT
            : T.F.SCHEDULE.TOGGLE_DAY_PLANNING_HINT
          ) | translate
        }}
      </small>
    </div>
  </div>
}
