<div class="chat-message-actions-container" data-id={{this.message.id}}>
  <div class="chat-message-actions">
    {{#if this.chatStateManager.isFullPageActive}}
      {{#each this.emojiReactions as |reaction|}}
        <ChatMessageReaction
          @reaction={{reaction}}
          @react={{this.messageActions.react}}
          @class="show"
        />
      {{/each}}
    {{/if}}

    {{#if this.messageCapabilities.canReact}}
      <DButton
        @class="btn-flat react-btn"
        @action={{this.messageActions.startReactionForMessageActions}}
        @icon="discourse-emojis"
        @title="chat.react"
      />
    {{/if}}

    {{#if this.messageCapabilities.canBookmark}}
      <DButton
        @class="btn-flat bookmark-btn"
        @action={{this.messageActions.toggleBookmark}}
      >
        <BookmarkIcon @bookmark={{this.message.bookmark}} />
      </DButton>
    {{/if}}

    {{#if this.messageCapabilities.canReply}}
      <DButton
        @class="btn-flat reply-btn"
        @action={{this.messageActions.reply}}
        @icon="reply"
        @title="chat.reply"
      />
    {{/if}}

    {{#if this.secondaryButtons.length}}
      <DropdownSelectBox
        @class="more-buttons"
        @options={{hash icon="ellipsis-v" placement="left"}}
        @content={{this.secondaryButtons}}
        @onChange={{action "handleSecondaryButtons"}}
      />
    {{/if}}
  </div>
</div>