<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' }} </span>
  }
</div>

@if (!isEditMode()) {
  <div class="msg">
    <mat-icon>add</mat-icon>
    click to create task
  </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() ? 'Plan task for day...' : 'Schedule task...'"
      [isIncludeDoneTasks]="false"
      [isLimitToProject]="false"
    ></select-task-minimal>

    <!-- Mode toggle hint -->
    <div class="mode-hint">
      <small
        >Ctrl+1 to toggle {{ isForDayMode() ? 'time scheduling' : 'day planning' }}</small
      >
    </div>
  </div>
}
