{{#if this.replyToMsg}}
  <ChatComposerMessageDetails
    @message={{this.replyToMsg}}
    @icon="reply"
    @action={{action "cancelReplyTo"}}
  />
{{/if}}

{{#if this.editingMessage}}
  <ChatComposerMessageDetails
    @message={{this.editingMessage}}
    @icon="pencil-alt"
    @action={{action "cancelEditing"}}
  />
{{/if}}

<div class="chat-composer-emoji-picker-anchor"></div>

<div
  role="region"
  aria-label={{i18n "chat.aria_roles.composer"}}
  class="chat-composer {{if this.disableComposer 'is-disabled'}}"
>
  {{#if
    (and
      this.chatEmojiPickerManager.opened
      (eq this.chatEmojiPickerManager.context "chat-composer")
    )
  }}
    <DButton
      @icon="times"
      @action={{this.chatEmojiPickerManager.close}}
      @class="chat-composer__close-emoji-picker-btn btn-flat"
    />
  {{else}}
    {{#unless this.disableComposer}}
      <ChatComposerDropdown
        @buttons={{this.dropdownButtons}}
        @isDisabled={{this.disableComposer}}
      />
    {{/unless}}
  {{/if}}

  <DTextarea
    @value={{readonly this.value}}
    @input={{action "onTextareaInput" value="target.value"}}
    @type="text"
    @class="chat-composer-input"
    @disabled={{this.disableComposer}}
    @autocorrect="on"
    @autocapitalize="sentences"
    @placeholder={{this.placeholder}}
    @focus-in={{action "onTextareaFocusIn" value="target"}}
    @rows={{1}}
  />

  {{#if this.isNetworkUnreliable}}
    <span
      class="chat-composer__unreliable-network"
      title={{i18n "chat.unreliable_network"}}
    >
      {{d-icon "exclamation-circle"}}
    </span>
  {{/if}}

  <FlatButton
    @action={{action "sendClicked"}}
    @icon="paper-plane"
    @class="icon-only send-btn chat-composer-inline-button"
    @title={{this.sendTitle}}
    @disabled={{this.sendDisabled}}
  />

  {{#unless this.disableComposer}}
    <ChatComposerInlineButtons @buttons={{this.inlineButtons}} />
  {{/unless}}
</div>

{{#if this.canAttachUploads}}
  <ChatComposerUploads
    @fileUploadElementId={{this.fileUploadElementId}}
    @onUploadChanged={{action "uploadsChanged"}}
  />
{{/if}}

{{#unless this.chatChannel.isDraft}}
  <div class="chat-replying-indicator-container">
    <ChatReplyingIndicator @chatChannel={{this.chatChannel}} />
  </div>
{{/unless}}