{{#if visible}}

{{!--
note this spinner is NEVER turned "off" when the composer is open
so I'm going to stop rendering it until we figure out what's up

<div class='composer-loading'>
  {{loading-spinner}}
</div>
--}}

<div class='contents'>

  {{render "composer-messages"}}

  <div class='control'>
    <a href class='toggler' {{action "toggle" bubbles=false}} title='{{i18n 'composer.toggler'}}'></a>

    {{#if model.viewOpen}}
      <div class='control-row reply-area'>
        <div class='composer-fields'>
          {{plugin-outlet "composer-open"}}

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

          {{#if model.canEditTitle}}
            <div class='form-element clearfix'>
              {{#if model.creatingPrivateMessage}}
                {{user-selector topicId=controller.controllers.topic.model.id
                                excludeCurrentUser="true"
                                id="private-message-users"
                                includeGroups="true"
                                class="span8"
                                placeholderKey="composer.users_placeholder"
                                tabindex="1"
                                usernames=model.targetUsernames}}
                {{#if showWarning}}
                  <div class='add-warning'>
                    <label>
                      {{input type="checkbox" checked=model.isWarning tabindex="3"}}
                      {{i18n "composer.add_warning"}}
                    </label>
                  </div>
                {{/if}}
              {{/if}}

              <div class="title-input">
                {{text-field value=model.title tabindex="2" id="reply-title" maxLength=maxTitleLength placeholderKey="composer.title_placeholder"}}
                {{popupInputTip validation=view.titleValidation shownAt=view.showTitleTip}}
              </div>

              {{#unless model.privateMessage}}
                <div class="category-input">
                  {{category-chooser valueAttribute="id" value=model.categoryId scopedCategoryId=scopedCategoryId tabindex="3"}}
                  {{popupInputTip validation=view.categoryValidation shownAt=view.showCategoryTip}}
                </div>
                {{#if model.archetype.hasOptions}}
                  <button class='btn' {{action "showOptions"}}>{{i18n 'topic.options'}}</button>
                {{/if}}
                {{render "additional-composer-buttons" model}}
              {{/unless}}
            </div>
          {{/if}}
          {{plugin-outlet "composer-fields"}}
        </div>

        <div class='wmd-controls'>
          <div class='textarea-wrapper'>
            <div class='wmd-button-bar' id='wmd-button-bar'></div>
            <div id='wmd-preview-scroller'></div>
            {{composer-text-area tabindex="4" value=model.reply}}
            {{popupInputTip validation=view.replyValidation shownAt=view.showReplyTip}}
          </div>
          <!-- keep the classes here in sync with post.hbs -->
          <div class='preview-wrapper regular'>
            <div id='wmd-preview' {{bind-attr class="hidePreview:hidden :cooked"}}></div>
          </div>
          <div class="composer-bottom-right">
            <a href="#" {{action "togglePreview"}} class='toggle-preview'>{{{model.toggleText}}}</a>
            <div id="file-uploading" {{bind-attr class="view.isUploading::hidden"}}>
              {{loading-spinner size="small"}} {{i18n 'upload_selector.uploading'}} {{view.uploadProgress}}% <a id="cancel-file-upload">{{i18n 'cancel'}}</a>
            </div>
            {{#if site.mobileView}}
              <a {{bind-attr class=":mobile-file-upload view.isUploading:hidden"}}>{{i18n 'upload'}}</a>
              <input type="file" id="mobile-uploader" />
            {{/if}}
            <div id='draft-status' {{bind-attr class="view.isUploading:hidden"}}>
              {{model.draftStatus}}
            </div>
          </div>
        </div>

        {{#if currentUser}}
          <div class='submit-panel'>
            {{plugin-outlet "composer-fields-below"}}
            <button {{action "save"}} tabindex="5" {{bind-attr class=":btn :btn-primary :create disableSubmit:disabled"}} title="{{i18n 'composer.title'}}">{{{model.saveIcon}}}{{model.saveText}}</button>
            <a href='#' {{action "cancel"}} class='cancel' tabindex="6">{{i18n 'cancel'}}</a>
          </div>
        {{/if}}

      </div>
    {{else}}
      <div class='row'>
        <div class='span24'>
          <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'}}
            {{/if}}
          </div>
          <div class='draft-text'>
            {{i18n 'composer.saved_draft'}}
          </div>
        </div>
      </div>
    {{/if}}

  </div>
</div>
{{/if}}
