{{#if (and this.chatStateManager.isFullPageActive this.includeHeader)}}
  <div
    class="chat-full-page-header
      {{unless this.chatChannel.isFollowing "-not-following"}}"
  >
    <div class="chat-channel-header-details">
      {{#if this.site.mobileView}}
        <div class="chat-full-page-header__left-actions">
          <DButton @class="chat-full-page-header__back-btn no-text btn-flat" @icon="chevron-left" @action={{this.onBackClick}} />
        </div>
      {{/if}}

      <LinkTo @route={{this.infoTabRoute}} @models={{array this.chatChannel.id (slugify-channel this.chatChannel)}} class="chat-channel-title-wrapper">
        <ChatChannelTitle @channel={{this.chatChannel}} />
      </LinkTo>

      {{#if this.showCloseFullScreenBtn}}
        <div class="chat-full-page-header__right-actions">
          <DButton @icon="discourse-compress" @title="chat.close_full_page" class="open-drawer-btn btn-flat no-text" @action={{action this.onCloseFullScreen}} />
        </div>
      {{/if}}
    </div>

    <ChatChannelStatus @channel={{this.chatChannel}} />
  </div>
{{/if}}

<ChatRetentionReminder @chatChannel={{this.chatChannel}} />

<div class="chat-message-actions-mobile-anchor"></div>
<div
  class={{concat-class
    "chat-message-emoji-picker-anchor"
    (if
      (and
        this.chatEmojiPickerManager.opened
        (eq this.chatEmojiPickerManager.context "chat-message")
      )
      "-opened"
    )
  }}
>
</div>

<div class="chat-messages-scroll chat-messages-container">
  <div class="chat-message-actions-desktop-anchor"></div>
  <div class="chat-messages-container">
    {{#if (or this.loading this.loadingMorePast)}}
      <ChatSkeleton @tagName="" />
    {{/if}}

    {{#each this.messages as |message|}}
      <ChatMessage @message={{message}} @canInteractWithChat={{this.canInteractWithChat}} @details={{this.details}} @chatChannel={{this.chatChannel}} @setReplyTo={{action "setReplyTo"}} @replyMessageClicked={{action "replyMessageClicked"}} @editButtonClicked={{action "editButtonClicked"}} @selectingMessages={{this.selectingMessages}} @onStartSelectingMessages={{this.onStartSelectingMessages}} @onSelectMessage={{this.onSelectMessage}} @bulkSelectMessages={{this.bulkSelectMessages}} @fullPage={{this.fullPage}} @afterReactionAdded={{action "reStickScrollIfNeeded"}} @isHovered={{eq message.id this.hoveredMessageId}} @onHoverMessage={{action "onHoverMessage"}} @onSwitchChannel={{this.onSwitchChannel}} @resendStagedMessage={{this.resendStagedMessage}} />
    {{/each}}

    {{#if this.loadingMoreFuture}}
      <ChatSkeleton @tagName="" />
    {{/if}}
  </div>

  {{#if this.allPastMessagesLoaded}}
    <div class="all-loaded-message">
      {{i18n "chat.all_loaded"}}
    </div>
  {{/if}}
</div>

{{#if this.showScrollToBottomBtn}}
  <div class="scroll-stick-wrap">
    <a
      href
      title={{i18n "chat.scroll_to_bottom"}}
      class={{concat-class
        "btn"
        "btn-flat"
        "chat-scroll-to-bottom"
        (if this.hasNewMessages "unread-messages")
      }}
      {{on "click" (action "restickScrolling")}}
    >
      {{#if this.hasNewMessages}}
        {{i18n "chat.scroll_to_new_messages"}}
      {{/if}}
      {{d-icon "arrow-down"}}
    </a>
  </div>
{{/if}}

{{#if this.selectingMessages}}
  <ChatSelectionManager @selectedMessageIds={{this.selectedMessageIds}} @chatChannel={{this.chatChannel}} @canModerate={{this.details.can_moderate}} @cancelSelecting={{action "cancelSelecting"}} />
{{else}}
  {{#if (or this.chatChannel.isDraft this.chatChannel.isFollowing)}}
    <ChatComposer @draft={{this.draft}} @details={{this.details}} @canInteractWithChat={{this.canInteractWithChat}} @sendMessage={{action "sendMessage"}} @editMessage={{action "editMessage"}} @setReplyTo={{action "setReplyTo"}} @loading={{this.sendingLoading}} @editingMessage={{readonly this.editingMessage}} @onCancelEditing={{this.cancelEditing}} @setInReplyToMsg={{this.setInReplyToMsg}} @onEditLastMessageRequested={{this.editLastMessageRequested}} @onValueChange={{action "composerValueChanged"}} @chatChannel={{this.chatChannel}} />
  {{else}}
    <ChatChannelPreviewCard @channel={{this.chatChannel}} />
  {{/if}}
{{/if}}