{{! template-lint-disable no-invalid-interactive }}

<ChatMessageSeparator @message={{this.message}} />

{{#if
  (and
    this.showActions this.site.mobileView this.chatMessageActionsMobileAnchor
  )
}}
  {{#in-element this.chatMessageActionsMobileAnchor}}
    <ChatMessageActionsMobile
      @message={{this.message}}
      @emojiReactions={{this.emojiReactions}}
      @secondaryButtons={{this.secondaryButtons}}
      @messageActions={{this.messageActions}}
      @messageCapabilities={{this.messageCapabilities}}
      @onHoverMessage={{this.onHoverMessage}}
    />
  {{/in-element}}
{{/if}}

{{#if
  (and
    this.showActions this.site.desktopView this.chatMessageActionsDesktopAnchor
  )
}}
  {{#in-element this.chatMessageActionsDesktopAnchor}}
    <ChatMessageActionsDesktop
      @message={{this.message}}
      @emojiReactions={{this.emojiReactions}}
      @secondaryButtons={{this.secondaryButtons}}
      @messageActions={{this.messageActions}}
      @messageCapabilities={{this.messageCapabilities}}
    />
  {{/in-element}}
{{/if}}

<div
  {{on "touchmove" this.handleTouchMove passive=true}}
  {{on "touchstart" this.handleTouchStart passive=true}}
  {{on "touchend" this.handleTouchEnd passive=true}}
  {{on
    "mouseenter"
    (fn this.onHoverMessage this.message (hash desktopOnly=true))
  }}
  {{on "mouseleave" (fn this.onHoverMessage null (hash desktopOnly=true))}}
  {{chat/track-message-visibility}}
  class={{concat-class
    "chat-message-container"
    (if this.isHovered "is-hovered")
    (if this.selectingMessages "selecting-messages")
  }}
  data-id={{or this.message.id this.message.stagedId}}
  data-staged-id={{if this.message.staged this.message.stagedId}}
>
  {{#if this.show}}
    {{#if this.selectingMessages}}
      <Input
        @type="checkbox"
        class="chat-message-selector"
        @checked={{this.message.selected}}
        {{on "click" (action "toggleChecked")}}
      />
    {{/if}}

    {{#if this.deletedAndCollapsed}}
      <div class="chat-message-deleted">
        <DButton
          @class="btn-flat chat-message-expand"
          @action={{action "expand"}}
          @label="chat.deleted"
        />
      </div>
    {{else if this.hiddenAndCollapsed}}
      <div class="chat-message-hidden">
        <DButton
          @class="btn-flat chat-message-expand"
          @action={{action "expand"}}
          @label="chat.hidden"
        />
      </div>
    {{else}}
      <div class={{this.chatMessageClasses}}>
        {{#if this.message.in_reply_to}}
          <div
            role="button"
            onclick={{action "viewReplyOrThread"}}
            class="chat-reply is-direct-reply"
          >
            {{d-icon "share" title="chat.in_reply_to"}}

            {{#if this.message.in_reply_to.chat_webhook_event.emoji}}
              <ChatEmojiAvatar
                @emoji={{this.message.in_reply_to.chat_webhook_event.emoji}}
              />
            {{else}}
              <ChatUserAvatar @user={{this.message.in_reply_to.user}} />
            {{/if}}

            <span class="chat-reply__excerpt">
              {{replace-emoji this.message.in_reply_to.excerpt}}
            </span>
          </div>
        {{/if}}

        {{#if this.hideUserInfo}}
          <ChatMessageLeftGutter @message={{@message}} @details={{@details}} />
        {{else}}
          <ChatMessageAvatar @message={{@message}} />
        {{/if}}

        <div class="chat-message-content">
          {{#unless this.hideUserInfo}}
            <ChatMessageInfo @message={{@message}} @details={{@details}} />
          {{/unless}}

          <ChatMessageText
            @cooked={{this.message.cooked}}
            @uploads={{this.message.uploads}}
            @edited={{this.message.edited}}
          >
            {{#if this.hasReactions}}
              <div class="chat-message-reaction-list">
                {{#if this.reactionLabel}}
                  <div class="reaction-users-list">
                    {{replace-emoji this.reactionLabel}}
                  </div>
                {{/if}}

                {{#each-in this.message.reactions as |emoji reactionAttrs|}}
                  <ChatMessageReaction
                    @reaction={{hash
                      emoji=emoji
                      users=reactionAttrs.users
                      count=reactionAttrs.count
                      reacted=reactionAttrs.reacted
                    }}
                    @react={{action "react"}}
                    @showUsersList={{true}}
                  />
                {{/each-in}}

                {{#if this.canInteractWithChat}}
                  {{#unless this.site.mobileView}}
                    <DButton
                      @class="chat-message-react-btn"
                      @action={{action "startReactionForReactionList"}}
                      @icon="discourse-emojis"
                      @title="chat.react"
                    />
                  {{/unless}}
                {{/if}}
              </div>
            {{/if}}
          </ChatMessageText>

          {{#if this.message.error}}
            <div class="chat-send-error">
              {{#if (eq this.message.error "network_error")}}
                <DButton
                  class="retry-staged-message-btn"
                  @action={{fn this.resendStagedMessage this.message}}
                >
                  {{d-icon "exclamation-circle"}}
                  <span class="retry-staged-message-btn__title">
                    {{i18n "chat.retry_staged_message.title"}}
                  </span>
                  <span class="retry-staged-message-btn__action">
                    {{i18n "chat.retry_staged_message.action"}}
                  </span>
                </DButton>
              {{else}}
                {{this.message.error}}
              {{/if}}
            </div>
          {{/if}}

          {{#if this.mentionWarning}}
            <div class="alert alert-info chat-message-mention-warning">
              {{#if this.mentionWarning.invitationSent}}
                {{d-icon "check"}}
                <span>
                  {{i18n
                    "chat.mention_warning.invitations_sent"
                    count=this.mentionWarning.without_membership.length
                  }}
                </span>
              {{else}}
                <FlatButton
                  @class="dismiss-mention-warning"
                  @title="chat.mention_warning.dismiss"
                  @action={{action "dismissMentionWarning"}}
                  @icon="times"
                />

                {{#if this.mentionWarning.cannot_see}}
                  <p
                    class="warning-item cannot-see"
                  >{{this.mentionedCannotSeeText}}</p>
                {{/if}}

                {{#if this.mentionWarning.without_membership}}
                  <p class="warning-item without-membership">
                    <span>{{this.mentionedWithoutMembershipText}}</span>
                    <a
                      class="invite-link"
                      href
                      onclick={{action "inviteMentioned"}}
                    >
                      {{i18n "chat.mention_warning.invite"}}
                    </a>
                  </p>
                {{/if}}
                {{#if this.mentionWarning.group_mentions_disabled}}
                  <p
                    class="warning-item"
                  >{{this.groupsWithDisabledMentions}}</p>
                {{/if}}

                {{#if this.mentionWarning.groups_with_too_many_members}}
                  <p class="warning-item">{{this.groupsWithTooManyMembers}}</p>
                {{/if}}
              {{/if}}
            </div>
          {{/if}}
        </div>
      </div>
    {{/if}}
  {{/if}}
</div>