<ComposerBody
  @composer={{this.model}}
  @showPreview={{this.showPreview}}
  @openIfDraft={{action "openIfDraft"}}
  @typed={{action "typed"}}
  @cancelled={{action "cancelled"}}
  @save={{action "save"}}
>
  <div class="grippie"></div>

  {{#if this.visible}}
    <ComposerMessages
      @composer={{this.model}}
      @messageCount={{this.messageCount}}
      @addLinkLookup={{action "addLinkLookup"}}
    />

    {{#if this.showFullScreenPrompt}}
      <ComposerFullscreenPrompt
        @removeFullScreenExitPrompt={{action "removeFullScreenExitPrompt"}}
      />
    {{/if}}

    {{#if this.model.viewOpenOrFullscreen}}
      <div
        role="form"
        aria-label={{I18n this.saveLabel}}
        class="reply-area {{if this.canEditTags 'with-tags' 'without-tags'}}"
      >
        <span>
          <PluginOutlet
            @name="composer-open"
            @connectorTagName="div"
            @outletArgs={{hash model=this.model}}
          />
        </span>

        <div class="reply-to">
          {{#unless this.model.viewFullscreen}}
            <div class="reply-details">
              <ComposerActionTitle
                @model={{this.model}}
                @openComposer={{action "openComposer"}}
                @closeComposer={{action "closeComposer"}}
                @canWhisper={{this.canWhisper}}
              />

              <PluginOutlet
                @name="composer-action-after"
                @outletArgs={{hash model=this.model}}
              />

              {{#unless this.site.mobileView}}
                {{#if this.model.unlistTopic}}
                  <span class="unlist">({{i18n "composer.unlist"}})</span>
                {{/if}}
                {{#if this.isWhispering}}
                  {{#if this.model.noBump}}
                    <span class="no-bump">{{d-icon "anchor"}}</span>
                  {{/if}}
                {{/if}}
              {{/unless}}

              {{#if this.canEdit}}
                <LinkToInput
                  @onClick={{action "displayEditReason"}}
                  @showInput={{this.showEditReason}}
                  @icon="info-circle"
                  @class="display-edit-reason"
                >
                  <TextField
                    @value={{this.editReason}}
                    @id="edit-reason"
                    @maxlength="255"
                    @placeholderKey="composer.edit_reason_placeholder"
                  />
                </LinkToInput>
              {{/if}}
            </div>
          {{/unless}}

          <PluginOutlet
            @name="before-composer-controls"
            @outletArgs={{hash model=this.model}}
          />

          <ComposerToggles
            @composeState={{this.model.composeState}}
            @showToolbar={{this.showToolbar}}
            @toggleComposer={{action "toggle"}}
            @toggleToolbar={{action "toggleToolbar"}}
            @toggleFullscreen={{action "fullscreenComposer"}}
            @disableTextarea={{this.disableTextarea}}
          />
        </div>

        <ComposerEditor
          @topic={{this.topic}}
          @composer={{this.model}}
          @lastValidatedAt={{this.lastValidatedAt}}
          @canWhisper={{this.canWhisper}}
          @storeToolbarState={{action "storeToolbarState"}}
          @onPopupMenuAction={{action "onPopupMenuAction"}}
          @showUploadModal={{route-action "showUploadSelector"}}
          @popupMenuOptions={{this.popupMenuOptions}}
          @draftStatus={{this.model.draftStatus}}
          @isUploading={{this.isUploading}}
          @isProcessingUpload={{this.isProcessingUpload}}
          @allowUpload={{this.allowUpload}}
          @uploadIcon={{this.uploadIcon}}
          @isCancellable={{this.isCancellable}}
          @uploadProgress={{this.uploadProgress}}
          @groupsMentioned={{action "groupsMentioned"}}
          @cannotSeeMention={{action "cannotSeeMention"}}
          @hereMention={{action "hereMention"}}
          @importQuote={{action "importQuote"}}
          @togglePreview={{action "togglePreview"}}
          @processPreview={{this.showPreview}}
          @showToolbar={{this.showToolbar}}
          @afterRefresh={{action "afterRefresh"}}
          @focusTarget={{this.focusTarget}}
          @disableTextarea={{this.disableTextarea}}
        >
          <div class="composer-fields">
            <PluginOutlet
              @name="before-composer-fields"
              @outletArgs={{hash model=this.model}}
            />
            {{#unless this.model.viewFullscreen}}
              {{#if this.model.canEditTitle}}
                {{#if this.model.creatingPrivateMessage}}
                  <div class="user-selector">
                    <ComposerUserSelector
                      @topicId={{this.topicModel.id}}
                      @recipients={{this.model.targetRecipients}}
                      @hasGroups={{this.model.hasTargetGroups}}
                      @focusTarget={{this.focusTarget}}
                      @class={{concat
                        "users-input"
                        (if this.showWarning " can-warn")
                      }}
                    />
                    {{#if this.showWarning}}
                      <label class="add-warning">
                        <Input
                          @type="checkbox"
                          @checked={{this.model.isWarning}}
                        />
                        <span>{{i18n "composer.add_warning"}}</span>
                      </label>
                    {{/if}}
                  </div>
                {{/if}}

                <div
                  class="title-and-category
                    {{if this.showPreview 'with-preview'}}"
                >
                  <ComposerTitle
                    @composer={{this.model}}
                    @lastValidatedAt={{this.lastValidatedAt}}
                    @focusTarget={{this.focusTarget}}
                  />

                  {{#if this.model.showCategoryChooser}}
                    <div class="category-input">
                      <CategoryChooser
                        @value={{this.model.categoryId}}
                        @onChange={{action (mut this.model.categoryId)}}
                        @options={{hash
                          disabled=this.disableCategoryChooser
                          scopedCategoryId=this.scopedCategoryId
                          prioritizedCategoryId=this.prioritizedCategoryId
                        }}
                      />
                      <PopupInputTip @validation={{this.categoryValidation}} />
                    </div>
                  {{/if}}

                  {{#if this.canEditTags}}
                    <MiniTagChooser
                      @value={{this.model.tags}}
                      @onChange={{action (mut this.model.tags)}}
                      @options={{hash
                        disabled=this.disableTagsChooser
                        categoryId=this.model.categoryId
                        minimum=this.model.minimumRequiredTags
                      }}
                    />
                    <PopupInputTip @validation={{this.tagValidation}} />
                  {{/if}}

                  <PluginOutlet
                    @name="after-title-and-category"
                    @outletArgs={{hash
                      model=this.model
                      tagValidation=this.tagValidation
                      canEditTags=this.canEditTags
                      disabled=this.disableTagsChooser
                    }}
                  />
                </div>
              {{/if}}

              <span>
                <PluginOutlet
                  @name="composer-fields"
                  @connectorTagName="div"
                  @outletArgs={{hash
                    model=this.model
                    showPreview=this.showPreview
                  }}
                />
              </span>
            {{/unless}}
          </div>
        </ComposerEditor>

        <span>
          <PluginOutlet
            @name="composer-after-composer-editor"
            @outletArgs={{hash model=this.model}}
          />
        </span>

        <div class="submit-panel">
          <span>
            <PluginOutlet
              @name="composer-fields-below"
              @connectorTagName="div"
              @outletArgs={{hash model=this.model}}
            />
          </span>

          <div class="save-or-cancel">
            <ComposerSaveButton
              @action={{action "save"}}
              @icon={{this.saveIcon}}
              @label={{this.saveLabel}}
              @forwardEvent={{true}}
              @disableSubmit={{this.disableSubmit}}
            />

            {{#if this.site.mobileView}}
              <a
                href
                {{on "click" this.cancel}}
                title={{i18n "cancel"}}
                class="cancel"
              >
                {{#if this.canEdit}}
                  {{d-icon "times"}}
                {{else}}
                  {{d-icon "far-trash-alt"}}
                {{/if}}
              </a>
            {{else}}
              <a href {{on "click" this.cancel}} class="cancel">{{i18n
                  "close"
                }}</a>
            {{/if}}

            {{#if this.site.mobileView}}
              {{#if this.whisperOrUnlistTopic}}
                <span class="whisper">
                  {{d-icon "far-eye-slash"}}
                </span>
              {{/if}}

              {{#if this.model.noBump}}
                <span class="no-bump">{{d-icon "anchor"}}</span>
              {{/if}}
            {{/if}}

            {{#if (or this.isUploading this.isProcessingUpload)}}
              <div id="file-uploading">
                {{#if this.isProcessingUpload}}
                  {{loading-spinner size="small"}}<span>{{i18n
                      "upload_selector.processing"
                    }}</span>
                {{else}}
                  {{loading-spinner size="small"}}<span>{{i18n
                      "upload_selector.uploading"
                    }}
                    {{this.uploadProgress}}%</span>
                {{/if}}

                {{#if this.isCancellable}}
                  <a
                    href
                    id="cancel-file-upload"
                    {{on "click" this.cancelUpload}}
                  >{{d-icon "times"}}</a>
                {{/if}}
              </div>
            {{/if}}

            <div class={{if this.isUploading "hidden"}} id="draft-status">
              {{#if this.model.draftStatus}}
                <span class="draft-error" title={{this.model.draftStatus}}>
                  {{#if this.model.draftConflictUser}}
                    {{avatar this.model.draftConflictUser imageSize="small"}}
                    {{d-icon "user-edit"}}
                  {{else}}
                    {{d-icon "exclamation-triangle"}}
                  {{/if}}
                  {{#unless this.site.mobileView}}
                    {{this.model.draftStatus}}
                  {{/unless}}
                </span>
              {{/if}}
            </div>

            <span>
              <PluginOutlet
                @name="composer-after-save-or-cancel"
                @outletArgs={{hash model=this.model}}
              />
            </span>
          </div>

          {{#if this.site.mobileView}}
            <span>
              <PluginOutlet
                @name="composer-mobile-buttons-bottom"
                @outletArgs={{hash model=this.model}}
              />
            </span>

            {{#if this.allowUpload}}
              <a
                id="mobile-file-upload"
                class="btn btn-default no-text mobile-file-upload
                  {{if this.isUploading 'hidden'}}"
                aria-label={{i18n "composer.upload_title"}}
              >
                {{d-icon this.uploadIcon}}
              </a>
            {{/if}}

            <a
              href
              class="btn btn-default no-text mobile-preview"
              title={{i18n "composer.show_preview"}}
              {{on "click" this.togglePreview}}
              aria-label={{i18n "preview"}}
            >
              {{d-icon "desktop"}}
            </a>

            {{#if this.showPreview}}
              <DButton
                @action={{action "togglePreview"}}
                @class="hide-preview"
                @ariaLabel="composer.hide_preview"
                @icon="pencil-alt"
              />
            {{/if}}
          {{else}}
            <DButton
              @action={{action "togglePreview"}}
              @translatedTitle={{this.toggleText}}
              @icon="angle-double-left"
              @class={{concat
                "btn-flat btn-mini-toggle toggle-preview "
                (unless this.showPreview "active")
              }}
            />
          {{/if}}
        </div>
      </div>
    {{else}}
      <div class="saving-text">
        {{#if this.model.createdPost}}
          {{i18n "composer.saved"}}
          <a
            href={{this.createdPost.url}}
            {{on "click" this.viewNewReply}}
            class="permalink"
          >{{i18n "composer.view_new_post"}}</a>
        {{else}}
          {{i18n "composer.saving"}}
          {{loading-spinner size="small"}}
        {{/if}}
      </div>

      <div class="draft-text">
        {{#if this.model.topic}}
          {{d-icon "share"}}
          {{html-safe this.draftTitle}}
        {{else}}
          {{i18n "composer.saved_draft"}}
        {{/if}}
      </div>

      <ComposerToggles
        @composeState={{this.model.composeState}}
        @toggleFullscreen={{action "openIfDraft"}}
        @toggleComposer={{action "toggle"}}
        @toggleToolbar={{action "toggleToolbar"}}
      />
    {{/if}}
  {{/if}}
</ComposerBody>