@if (customEmojiMenu(); as emojiMenu) {
  <app-context-menu
    [x]="emojiMenu.posX"
    [y]="emojiMenu.posY"
    [width]="'w-56'"
    [sheetTitle]="'shell.contextMenu.emoji' | translate"
    (closed)="close()"
  >
    @if (emojiMenu.action === 'add') {
      <button
        type="button"
        class="context-menu-item"
        (click)="addCustomEmojiToLibrary()"
      >
        {{ 'shell.contextMenu.addToEmojiLibrary' | translate }}
      </button>
    } @else {
      <button
        type="button"
        class="context-menu-item-danger"
        (click)="removeCustomEmojiFromLibrary()"
      >
        {{ 'shell.contextMenu.removeFromEmojiLibrary' | translate }}
      </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')"
      >
        {{ 'common.cut' | translate }}
      </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')"
      >
        {{ 'common.copy' | translate }}
      </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')"
      >
        {{ 'common.paste' | translate }}
      </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')"
      >
        {{ 'common.selectAll' | translate }}
      </button>
    } @else if (params()!.selectionText) {
      <button
        type="button"
        class="context-menu-item"
        (pointerdown)="onActionPointerDown($event, 'copy')"
        (click)="onActionClick($event, 'copy')"
      >
        {{ 'common.copy' | translate }}
      </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')"
      >
        {{ 'common.copyLink' | translate }}
      </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')"
      >
        {{ 'common.copyImage' | translate }}
      </button>
    }
  </app-context-menu>
}