<div class="ico-wrapper">
  @switch (icoType()) {
    <!-- -->
    @case ('REPEAT') {
      <mat-icon
        class="ico"
        inline="true"
        >repeat</mat-icon
      >
    }
    @case ('PLANNED_FOR_DAY') {
      <div class="day-of-month">{{ se().dayOfMonth }}</div>
    }
    @case ('SCHEDULED_TASK') {
      @if (task()?.remindAt) {
        <mat-icon
          class="ico"
          inline="true"
          >alarm
        </mat-icon>
      } @else {
        <mat-icon
          class="ico"
          inline="true"
          >schedule
        </mat-icon>
      }
    }
    @case ('FLOW') {
      <!--<div class="fake-ico">~</div>-->
      <mat-icon
        class="ico"
        inline="true"
        >wb_sunny
      </mat-icon>
    }
    @case ('LUNCH_BREAK') {
      <mat-icon
        class="ico"
        inline="true"
        >restaurant
      </mat-icon>
    }
    @case ('CAL_PROJECTION') {
      <mat-icon
        class="ico"
        inline="true"
        >{{ $any(se().data)?.icon || 'event' }}
      </mat-icon>
    }
    <!--- --->
    @default {}
    <!--- --->
  }
  <!--- -->

  @if (
    se().type === SVEType.ScheduledTask || se().type === SVEType.ScheduledRepeatProjection
  ) {
    <div class="time-badge">{{ scheduledClockStr() }}</div>
  }
</div>
<!-- -->

<div
  #titleEl
  class="title"
>
  <span class="title-text">
    <!--  {{ se().data['plannedForDay'] }}-->
    <!--  {{ scheduledClockStr }}-->
    <!--  {{se().id}} __ {{se().data?.id}} __-->
    <!-- -->

    @if (
      se().type === SVEType.SplitTaskContinuedLast ||
      se().type === SVEType.SplitTaskContinued ||
      se().type === SVEType.RepeatProjectionSplitContinued ||
      se().type === SVEType.RepeatProjectionSplitContinuedLast
    ) {
      ...
      <!-- -->
    } @else {
      @if (titleHasLinks()) {
        <span [innerHTML]="title() | renderLinks"></span>
      } @else {
        {{ title() }}
      }
    }
  </span>
</div>

@if (task()) {
  <task-context-menu
    #taskContextMenu
    [task]="task()"
  ></task-context-menu>
}

@if (se().type === SVEType.CalendarEvent) {
  <div
    [matMenuTriggerFor]="calContextMenu"
    #calMenuTrigger="matMenuTrigger"
    class="cal-menu-trigger"
  ></div>
  <mat-menu #calContextMenu="matMenu">
    @if (hasCalendarEventUrl()) {
      <button
        mat-menu-item
        (click)="openCalendarEventLink()"
      >
        <mat-icon>open_in_new</mat-icon>
        {{ T.F.CALENDARS.CONTEXT_MENU.OPEN_IN_CALENDAR | translate }}
      </button>
    }
    @if (canRescheduleCalendarEvent()) {
      <button
        mat-menu-item
        (click)="rescheduleCalendarEvent()"
      >
        <mat-icon>schedule</mat-icon>
        {{ T.F.CALENDARS.CONTEXT_MENU.RESCHEDULE | translate }}
      </button>
    }
    @if (!isReferenceCalendar()) {
      <button
        mat-menu-item
        (click)="createCalendarEventAsTask()"
      >
        <mat-icon>add</mat-icon>
        {{ T.F.CALENDARS.CONTEXT_MENU.CREATE_TASK | translate }}
      </button>
      <button
        mat-menu-item
        (click)="hideCalendarEvent()"
      >
        <mat-icon>visibility_off</mat-icon>
        {{ T.G.HIDE | translate }}
      </button>
    }
    @if (isCalendarEventFromPlugin()) {
      <button
        mat-menu-item
        (click)="deleteCalendarEvent()"
      >
        <mat-icon color="warn">delete</mat-icon>
        {{ T.F.CALENDARS.CONTEXT_MENU.DELETE_EVENT | translate }}
      </button>
    }
  </mat-menu>
}

@if (isResizable()) {
  <div
    class="resize-handle"
    [matTooltipPosition]="'above'"
    [matTooltip]="beyondBudgetTooltip"
    [matTooltipDisabled]="!se().isBeyondBudget"
    [attr.aria-label]="se().isBeyondBudget ? beyondBudgetTooltip : null"
    (mousedown)="onResizeStart($event)"
    (touchstart)="onResizeStart($event)"
  >
    <div class="resize-grip"></div>
  </div>
}

<ng-content></ng-content>
