<header
  class="week-header"
  [class.isInPanel]="isInPanel()"
>
  <div class="week-header-dates">
    <div class="filler"><!--for time --></div>
    @for (day of daysToShow(); track $index) {
      <div class="day">
        @if (day === todayDateStr()) {
          <mat-icon>wb_sunny</mat-icon>
        }
        <div class="day-num">{{ dayHeaderLabels()[day].num }}</div>
        <div class="day-day">{{ dayHeaderLabels()[day].day }}</div>
        @if (beyondBudgetStats()[$index].count > 0) {
          <span
            class="over-budget-badge"
            tabindex="0"
            [matTooltipPosition]="'below'"
            [matTooltip]="beyondBudgetTooltips()[$index]"
            [attr.aria-label]="beyondBudgetTooltips()[$index]"
          >
            <span
              class="over-budget-symbol"
              aria-hidden="true"
              >!</span
            >
            @if (beyondBudgetStats()[$index].count > 1) {
              <span class="over-budget-count">
                {{ beyondBudgetStats()[$index].count }}
              </span>
            }
          </span>
        }
      </div>
    }
  </div>
</header>

<div
  #gridContainer
  class="grid-container"
  [style.--schedule-row-height]="scheduleRowHeightCss()"
  [style.--schedule-row-height-mobile]="scheduleRowHeightMobileCss()"
  (click)="onGridClick($event)"
  (mousemove)="onMoveOverGrid($event)"
>
  <!-- Sticky background strip behind the time column (only when horizontally scrolled) -->
  <div class="time-column-bg"></div>

  <!-- Time -->
  @for (time of times(); track $index) {
    <div
      class="time"
      style="grid-row: {{ $index * FH + 1 }}"
    >
      {{ time }}
    </div>
  }

  <!-- Grid Rows -->
  @for (row of rowsByNr; track $index) {
    <div
      class="row"
      style="grid-row: {{ row + 1 }}"
    ></div>
  }

  <!-- Grid Cols -->
  @for (day of daysToShow(); track $index) {
    <div
      class="col"
      [attr.data-day]="day"
      style="grid-column: {{ $index + 2 }}; grid-row: 1 / span {{
        ($index === 0 && currentTimeRow() !== null
          ? currentTimeRow()!
          : endOfDayColRowStart()) - 1
      }}"
    ></div>
    <div
      class="col end-of-day"
      [attr.data-day]="day"
      style="grid-column: {{ $index + 2 }}; grid-row: {{
        $index === 0 && currentTimeRow() !== null
          ? currentTimeRow()!
          : endOfDayColRowStart()
      }} / span {{
        totalRows -
          ($index === 0 && currentTimeRow() !== null
            ? currentTimeRow()!
            : endOfDayColRowStart())
      }}"
    ></div>
  }

  <!-- Work Start and End -->
  @if (workStartEnd()) {
    <div
      id="work-start"
      class="work-start"
      style="grid-row: {{ workStartEnd()!.workStartRow }}"
    >
      <div>{{ T.F.SCHEDULE.START | translate }}</div>
    </div>
    <div
      class="work-end"
      style="grid-row: {{ workStartEnd()!.workEndRow }}"
    >
      <div>{{ T.F.SCHEDULE.END | translate }}</div>
    </div>
  }

  @if (currentTimeRow() !== null) {
    <div
      id="current-time"
      class="current-time"
      style="grid-column: 2;  grid-row: {{ currentTimeRow() }} / span 1"
    >
      <div class="circle"></div>
    </div>
  }

  <!-- Events -->
  @for (ev of safeEvents(); track trackEventKey(ev)) {
    @if (canDragEvent(ev)) {
      <schedule-event
        class="draggable"
        [cdkDragData]="ev"
        (cdkDragMoved)="dragMoved($event)"
        (cdkDragStarted)="dragStarted($event)"
        (cdkDragReleased)="dragReleased($event)"
        [cdkDragStartDelay]="isTouchActive() ? touchDragStartDelayMs : 0"
        [event]="ev"
      ></schedule-event>
    } @else {
      <schedule-event
        [event]="ev"
        [cdkDragDisabled]="true"
      ></schedule-event>
    }
  }

  @if (
    (!isTaskDragActive() || isCtrlPressed()) && newTaskPlaceholder();
    as newTaskPlaceholder
  ) {
    <create-task-placeholder
      [isEditMode]="isCreateTaskActive()"
      [time]="newTaskPlaceholder.time"
      [date]="newTaskPlaceholder.date"
      (editEnd)="isCreateTaskActive.set(false); this.newTaskPlaceholder.set(null)"
      [style]="newTaskPlaceholder.style"
      [style.opacity]="isCtrlPressed() ? 1 : null"
    >
    </create-task-placeholder>
  }

  @if (isDragging() && currentDragEvent() && dragPreviewStyle()) {
    <schedule-event
      class="custom-drag-preview"
      [event]="currentDragEvent()!"
      [style]="dragPreviewStyle()!"
      [class.isShiftInsertPreview]="dragPreviewContext()?.kind === 'shift-task'"
      [class.isScheduleForDay]="isShiftNoScheduleMode()"
      [isDragPreview]="true"
    >
      @if (dragPreviewLabel()) {
        <div class="drag-preview-time-badge">
          {{ dragPreviewLabel() }}
        </div>
      }
    </schedule-event>
  }
</div>

@if (showShiftKeyInfo()) {
  <div class="shift-key-info">
    <div class="info-content">
      <mat-icon>info</mat-icon>
      <span>{{ T.F.SCHEDULE.SHIFT_KEY_INFO | translate }}</span>
    </div>
  </div>
}
