{{#composer-body composer=model
                 showPreview=showPreview
                 openIfDraft="openIfDraft"
                 typed="typed"
                 cancelled="cancelled"
                 save="save"}}

  {{#if visible}}

      {{#if showPopupMenu}}
        {{#popup-menu visible=optionsVisible hide="hideOptions" title="composer.options"}}
          {{#each popupMenuOptions as |option|}}
            {{#if option.condition}}
              <li>
                {{d-button action=option.action icon=option.icon label=option.label}}
              </li>
            {{/if}}
          {{/each}}
        {{/popup-menu}}
      {{/if}}

      {{composer-messages composer=model
                          messageCount=messageCount
                          addLinkLookup="addLinkLookup"}}

      {{composer-toggles composeState=model.composeState
                         toggleComposer=(action "toggle")
                         toggleToolbar=(action "toggleToolbar")}}

      {{#if model.viewOpen}}

        <div class='reply-area {{if canEditTags "with-tags"}}'>

          <div class='composer-fields'>

            {{plugin-outlet name="composer-open" args=(hash model=model)}}

            <div class='reply-to'>
              {{{model.actionTitle}}}

              {{#unless site.mobileView}}
                {{#if whisperOrUnlistTopicText}}
                  <span class='whisper'>({{whisperOrUnlistTopicText}})</span>
                {{/if}}
              {{/unless}}

              {{#if canEdit}}
                {{#if showEditReason}}
                  {{text-field autofocus="true" value=editReason tabindex="7" id="edit-reason" maxlength="255" placeholderKey="composer.edit_reason_placeholder"}}
                {{else}}
                  <a {{action "displayEditReason"}} class="display-edit-reason">{{i18n 'composer.show_edit_reason'}}</a>
                {{/if}}
              {{/if}}
            </div>

            {{#if model.canEditTitle}}
              {{#if model.creatingPrivateMessage}}
                <div class='user-selector'>
                  {{composer-user-selector topicId=topicModel.id
                                           usernames=model.targetUsernames
                                           hasGroups=model.hasTargetGroups
                                           focusTarget=focusTarget
                                           class="users-input"}}
                  {{#if showWarning}}
                    <label class='add-warning'>
                      {{input type="checkbox" checked=model.isWarning tabindex="3"}}
                      {{i18n "composer.add_warning"}}
                    </label>
                  {{/if}}
                </div>
              {{/if}}

              <div class="title-and-category">

                {{composer-title composer=model lastValidatedAt=lastValidatedAt focusTarget=focusTarget}}

                {{#if model.showCategoryChooser}}
                  <div class="category-input">
                    {{category-chooser value=model.categoryId scopedCategoryId=scopedCategoryId tabindex="3"}}
                    {{popup-input-tip validation=categoryValidation}}
                  </div>
                  {{#if model.archetype.hasOptions}}
                    {{d-button action="showOptions" label="topic.options"}}
                  {{/if}}
                {{/if}}

              </div>
            {{/if}}

            {{plugin-outlet name="composer-fields" args=(hash model=model)}}

          </div>

          {{composer-editor topic=topic
                            composer=model
                            lastValidatedAt=lastValidatedAt
                            canWhisper=canWhisper
                            showPopupMenu=showPopupMenu
                            draftStatus=model.draftStatus
                            isUploading=isUploading
                            isCancellable=isCancellable
                            uploadProgress=uploadProgress
                            groupsMentioned="groupsMentioned"
                            cannotSeeMention="cannotSeeMention"
                            importQuote="importQuote"
                            showOptions="showOptions"
                            hideOptions="hideOptions"
                            optionsVisible=optionsVisible
                            togglePreview="togglePreview"
                            showToolbar=showToolbar
                            showUploadSelector="showUploadSelector"
                            afterRefresh="afterRefresh"}}

          <div class='submit-panel {{if canEditTags "with-tags"}}'>
            {{plugin-outlet name="composer-fields-below" args=(hash model=model)}}

            {{#if canEditTags}}
              {{tag-chooser tags=model.tags tabIndex="4" categoryId=model.categoryId}}
            {{/if}}

            <div class='save-or-cancel'>
              {{composer-save-button action=(action "save")
                                     icon=model.saveIcon
                                     label=model.saveLabel
                                     disableSubmit=disableSubmit}}

              <a href {{action "cancel"}} class='cancel' tabindex="6">{{i18n 'cancel'}}</a>

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


              {{#if isUploading}}
                <div id="file-uploading">
                  {{loading-spinner size="small"}} {{i18n 'upload_selector.uploading'}}
                  {{uploadProgress}}%
                  {{#if isCancellable}}
                    <a href id="cancel-file-upload" {{action "cancelUpload"}}>{{d-icon "times"}}</a>
                  {{/if}}
                </div>
              {{/if}}
              <div id='draft-status' class="{{if isUploading 'hidden'}}">
                {{model.draftStatus}}
              </div>
            </div>

            <div class="composer-bottom-right">
              {{#if site.mobileView}}
                <a class="mobile-file-upload {{if isUploading 'hidden'}}">{{i18n 'upload'}}</a>

                {{#if showPreview}}
                  {{d-button action='togglePreview' class='hide-preview' label='composer.hide_preview'}}
                {{/if}}
              {{else}}
                <a href {{action "togglePreview"}} class='toggle-preview'>{{{toggleText}}}</a>
              {{/if}}

            </div>
          </div>
        </div>

      {{else}}
        <div class='saving-text'>
          {{#if model.createdPost}}
            {{i18n 'composer.saved'}} <a class='permalink' href="{{unbound createdPost.url}}" {{action "viewNewReply"}}>{{i18n 'composer.view_new_post'}}</a>
          {{else}}
            {{i18n 'composer.saving'}} {{loading-spinner size="small"}}
          {{/if}}
        </div>

        <div class='draft-text'>
          {{#if model.topic}}
            {{d-icon "mail-forward"}} {{{draftTitle}}}
          {{else}}
            {{i18n "composer.saved_draft"}}
          {{/if}}
        </div>
      {{/if}}

  {{/if}}

{{/composer-body}}