@if (customEmojiMenu(); as emojiMenu) {
  <app-context-menu
    [x]="emojiMenu.posX"
    [y]="emojiMenu.posY"
    [width]="'w-56'"
    sheetTitle="Emoji"
    (closed)="close()"
  >
    @if (emojiMenu.action === 'add') {
      <button
        type="button"
        class="context-menu-item"
        (click)="addCustomEmojiToLibrary()"
      >
        Add to emoji library
      </button>
    } @else {
      <button
        type="button"
        class="context-menu-item-danger"
        (click)="removeCustomEmojiFromLibrary()"
      >
        Remove from emoji library
      </button>
    }
  </app-context-menu>
}

@if (params()) {
  <app-context-menu
    [x]="params()!.posX"
    [y]="params()!.posY"
    [width]="'w-44'"
    (closed)="close()"
  >
    @if (params()!.isEditable) {
      <button
        type="button"
        class="context-menu-item"
        [disabled]="!params()!.editFlags.canCut"
        [class.opacity-40]="!params()!.editFlags.canCut"
        (pointerdown)="onActionPointerDown($event, 'cut')"
        (click)="onActionClick($event, 'cut')"
      >
        Cut
      </button>
      <button
        type="button"
        class="context-menu-item"
        [disabled]="!params()!.editFlags.canCopy"
        [class.opacity-40]="!params()!.editFlags.canCopy"
        (pointerdown)="onActionPointerDown($event, 'copy')"
        (click)="onActionClick($event, 'copy')"
      >
        Copy
      </button>
      <button
        type="button"
        class="context-menu-item"
        [disabled]="!params()!.editFlags.canPaste"
        [class.opacity-40]="!params()!.editFlags.canPaste"
        (pointerdown)="onActionPointerDown($event, 'paste')"
        (click)="onActionClick($event, 'paste')"
      >
        Paste
      </button>
      <div class="context-menu-divider"></div>
      <button
        type="button"
        class="context-menu-item"
        [disabled]="!params()!.editFlags.canSelectAll"
        [class.opacity-40]="!params()!.editFlags.canSelectAll"
        (pointerdown)="onActionPointerDown($event, 'selectAll')"
        (click)="onActionClick($event, 'selectAll')"
      >
        Select All
      </button>
    } @else if (params()!.selectionText) {
      <button
        type="button"
        class="context-menu-item"
        (pointerdown)="onActionPointerDown($event, 'copy')"
        (click)="onActionClick($event, 'copy')"
      >
        Copy
      </button>
    }

    @if (params()!.linkURL) {
      @if (params()!.isEditable || params()!.selectionText) {
        <div class="context-menu-divider"></div>
      }
      <button
        type="button"
        class="context-menu-item"
        (pointerdown)="onActionPointerDown($event, 'copyLink')"
        (click)="onActionClick($event, 'copyLink')"
      >
        Copy Link
      </button>
    }

    @if (params()!.mediaType === 'image' && params()!.srcURL) {
      @if (params()!.isEditable || params()!.selectionText || params()!.linkURL) {
        <div class="context-menu-divider"></div>
      }
      <button
        type="button"
        class="context-menu-item"
        (pointerdown)="onActionPointerDown($event, 'copyImage')"
        (click)="onActionClick($event, 'copyImage')"
      >
        Copy Image
      </button>
    }
  </app-context-menu>
}