<div
  #wrapperEl
  [class.isHideOverflow]="isHideOverflow()"
  class="markdown-wrapper"
  spResolveClipboardImages
>
  @if (isShowEdit() || !isMarkdownFormattingEnabled()) {
    <textarea
      #textareaEl
      (blur)="untoggleShowEdit(); setBlur($event)"
      (focus)="setFocus($event)"
      (input)="resizeTextareaToFit()"
      (keydown)="keypressHandler($event)"
      (keypress)="keypressHandler($event)"
      (paste)="pasteHandler($event)"
      [@fadeIn]
      [ngModel]="modelCopy()"
      [placeholder]="placeholderTxt() ?? ''"
      class="mat-body-2 markdown-unparsed"
      rows="1"
    ></textarea>
  }

  <!--  (focus)="clickOrFocusPreview($event, true)"-->
  @if (isShowPreview()) {
    <markdown
      #previewEl
      (mousedown)="previewMousedown($event)"
      (click)="clickPreview($event)"
      [data]="resolvedMarkdownData"
      [class.preview-while-editing]="isShowEdit()"
      class="mat-body-2 markdown-parsed markdown"
      tabindex="0"
    ></markdown>
  }
</div>

@if (isShowControls()) {
  <div class="controls">
    <ng-content> </ng-content>

    @if (isShowChecklistToggle() && isMarkdownFormattingEnabled()) {
      <!--  -->
      <button
        [matTooltip]="T.F.TASK.ADDITIONAL_INFO.ADD_CHECKLIST_ITEM | translate"
        (mousedown)="$event.preventDefault()"
        (click)="toggleChecklistMode($event)"
        mat-icon-button
      >
        <mat-icon>checklist</mat-icon>
      </button>
    }
    @if (isCurrentlyChecklist()) {
      <button
        [matTooltip]="T.F.TASK.ADDITIONAL_INFO.CHECKLIST_ACTIONS | translate"
        [matMenuTriggerFor]="checklistMenu"
        (mousedown)="$event.preventDefault()"
        mat-icon-button
      >
        <mat-icon>playlist_add_check</mat-icon>
      </button>
      <mat-menu #checklistMenu="matMenu">
        <button
          (click)="checkAllChecklistItems()"
          mat-menu-item
        >
          <mat-icon>done_all</mat-icon>
          {{ T.F.TASK.ADDITIONAL_INFO.CHECK_ALL | translate }}
        </button>
        <button
          (click)="uncheckAllChecklistItems()"
          mat-menu-item
        >
          <mat-icon>remove_done</mat-icon>
          {{ T.F.TASK.ADDITIONAL_INFO.UNCHECK_ALL | translate }}
        </button>
        <button
          (click)="clearCompletedChecklistItems()"
          mat-menu-item
        >
          <mat-icon>delete_sweep</mat-icon>
          {{ T.F.TASK.ADDITIONAL_INFO.CLEAR_COMPLETED | translate }}
        </button>
      </mat-menu>
    }
    <button
      [matTooltip]="'Open in fullscreen'"
      (mousedown)="$event.preventDefault()"
      (click)="openFullScreen()"
      mat-icon-button
    >
      <mat-icon>fullscreen</mat-icon>
    </button>
  </div>
}
