<ng-content></ng-content>

<swipe-block
  [isDone]="task().isDone"
  (swipeStart)="onSwipeStart()"
  (swipeRight)="toggleTaskDone()"
  (swipeRightTriggered)="onSwipeRightTriggered($event)"
  (swipeLeft)="openContextMenu()"
>
  <div class="task-content">
    <done-toggle
      [isDone]="task().isDone"
      [isCurrent]="isCurrent()"
      [showDoneAnimation]="showDoneAnimation()"
      [showUndoneAnimation]="showUndoneAnimation()"
      [attr.aria-label]="T.F.TASK.CMP.TOGGLE_DONE | translate"
      (toggled)="toggleTaskDone()"
    ></done-toggle>

    <div class="no-drag">
      <div class="wrap">
        @if (parentTitle) {
          <div class="parent-title">{{ parentTitle }}</div>
        }

        @if (titleHasLinks()) {
          <div
            class="title"
            [innerHTML]="task().title | renderLinks"
          ></div>
        } @else {
          <div class="title">{{ task().title }}</div>
        }

        <tag-list
          [isShowProjectTagAlways]="true"
          [tagsToHide]="tagsToHide()"
          [task]="task()"
        ></tag-list>
      </div>

      <div
        (click)="estimateTimeClick($event)"
        [class.hasNoTimeSpentOrEstimate]="!task().timeSpent && !task().timeEstimate"
        [style.pointer-events]="task().subTaskIds?.length && 'none'"
        class="planner-time-remaining-shared"
      >
        <inline-input
          (changed)="updateTimeEstimate($event)"
          [displayValue]="timeEstimate() | msToString"
          [type]="'duration'"
          [value]="timeEstimate()"
        >
        </inline-input>
        @if (task().subTaskIds?.length) {
          <span class="sub-task-count">
            <mat-icon inline="true">account_tree</mat-icon>{{ task().subTaskIds?.length }}
          </span>
        }
      </div>
    </div>
  </div>
</swipe-block>

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