<div class="chat-message-actions-backdrop">
  <div
    role="button"
    class="collapse-area"
    {{on "touchstart" this.collapseMenu passive=true}}
  >
  </div>

  <div class="chat-message-actions">
    <div class="selected-message-container">
      <div class="selected-message">
        <ChatUserAvatar @user={{this.message.user}} />
        <span
          {{on "touchstart" this.expandReply passive=true}}
          role="button"
          class={{concat-class
            "selected-message-reply"
            (if this.hasExpandedReply "is-expanded")
          }}
        >
          {{this.message.message}}
        </span>
      </div>
    </div>

    <ul class="secondary-actions">
      {{#each this.secondaryButtons as |button|}}
        <li class="chat-message-action-item" data-id={{button.id}}>
          <DButton
            @class="chat-message-action"
            @translatedLabel={{button.name}}
            @icon={{button.icon}}
            @actionParam={{button.id}}
            @action={{action
              "actAndCloseMenu"
              (get this.messageActions button.id)
            }}
          />
        </li>
      {{/each}}
    </ul>

    {{#if
      (or this.messageCapabilities.canReact this.messageCapabilities.canReply)
    }}
      <div class="main-actions">
        {{#if this.messageCapabilities.canReact}}
          {{#each this.emojiReactions as |reaction|}}
            <ChatMessageReaction
              @reaction={{reaction}}
              @react={{this.messageActions.react}}
              @class="show"
            />
          {{/each}}

          <DButton
            @class="btn-flat react-btn"
            @action={{action
              "actAndCloseMenu"
              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="chat-message-action reply-btn btn-flat"
            @action={{action "actAndCloseMenu" this.messageActions.reply}}
            @icon="reply"
            @title="chat.reply"
          />
        {{/if}}
      </div>
    {{/if}}
  </div>
</div>