{{#if model}}
  <div class="container">
    {{discourse-banner user=currentUser banner=site.banner overlay=view.hasScrolled hide=model.errorLoading}}
  </div>
{{/if}}

{{plugin-outlet "topic-above-post-stream"}}

{{#if model.postStream.loaded}}
  {{#if model.postStream.firstPostPresent}}
    <div id="topic-title">
      <div class="container">

        <div class="title-wrapper">
          {{#if editingTopic}}
            {{#if model.isPrivateMessage}}
              <span class="private-message-glyph">{{fa-icon "envelope"}}</span>
              {{autofocus-text-field id="edit-title" value=buffered.title maxLength=maxTitleLength}}
            {{else}}
              {{autofocus-text-field id="edit-title" value=buffered.title maxLength=maxTitleLength}}
              <br>
              {{category-chooser valueAttribute="id" value=buffered.category_id source=buffered.category_id}}
            {{/if}}

            {{plugin-outlet "edit-topic"}}

            {{d-button action="finishedEditingTopic" class="btn-primary btn-small submit-edit" icon="check"}}
            {{d-button action="cancelEditingTopic" class="btn-small cancel-edit" icon="times"}}
          {{else}}
            <h1>
              {{#unless model.is_warning}}
                <span class="private-message-glyph">{{fa-icon "envelope"}}</span>
              {{/unless}}

              {{#if model.details.loaded}}
                {{topic-status topic=model}}
                <a href="{{unbound model.url}}" {{action "jumpTop"}} class="fancy-title">
                  {{{model.fancyTitle}}}
                </a>
              {{/if}}

              {{#if model.details.can_edit}}
                <a href {{action "editTopic"}} class="edit-topic" title="{{i18n "edit"}}">{{fa-icon "pencil"}}</a>
              {{/if}}
            </h1>

            {{#unless model.isPrivateMessage}}
              {{topic-category topic=model}}
            {{/unless}}
          {{/if}}
        </div>
        {{plugin-outlet "topic-title"}}
      </div>
    </div>
  {{/if}}

  <div class="container posts">

    {{view "selected-posts"}}

    <div class="row">
      <section class="topic-area" id="topic" data-topic-id="{{unbound model.id}}">
        <div class="posts-wrapper">

          {{render "topic-progress"}}

          {{conditional-loading-spinner condition=model.postStream.loadingAbove}}

          {{#unless model.postStream.loadingFilter}}
            {{cloaked-collection itemViewClass="post"
                                 idProperty="post_number"
                                 defaultHeight="200"
                                 content=model.postStream.posts
                                 slackRatio="15"
                                 loadingHTML=""
                                 preservesContext="true"
                                 uncloakDefault="true"
                                 offsetFixedTop="header"
                                 offsetFixedBottom="#reply-control"}}
          {{/unless}}

          {{conditional-loading-spinner condition=model.postStream.loadingBelow}}
        </div>
        <div id="topic-bottom"></div>

        {{#conditional-loading-spinner condition=model.postStream.loadingFilter}}
          {{#if loadedAllPosts}}

            {{view "topic-closing" topic=model}}
            {{view "topic-footer-buttons" topic=model}}

            {{#if model.pending_posts_count}}
              <div class="has-pending-posts">
                {{{i18n "queue.has_pending_posts" count=model.pending_posts_count}}}

                {{#if currentUser.show_queued_posts}}
                  {{#link-to "queued-posts"}}
                    {{fa-icon "check"}}
                    {{i18n "queue.view_pending"}}
                  {{/link-to}}
                {{/if}}
              </div>
            {{/if}}

            {{plugin-outlet "topic-above-suggested"}}

            {{#if model.details.suggested_topics.length}}
              <div id="suggested-topics">
                <h3>{{i18n "suggested_topics.title"}}</h3>
                <div class="topics">
                  {{basic-topic-list topics=model.details.suggested_topics postsAction="showTopicEntrance"}}
                </div>
                <h3>{{{view.browseMoreMessage}}}</h3>
              </div>
            {{/if}}

          {{/if}}
        {{/conditional-loading-spinner}}

      </section>
    </div>

  </div>
{{else}}
  <div class="container">
    {{#conditional-loading-spinner condition=noErrorYet}}
      {{#if model.notFoundHtml}}
        <div class="not-found">{{{model.notFoundHtml}}}</div>
      {{else}}
        <div class="topic-error">
          <div>{{model.message}}</div>
          {{#if model.noRetry}}
            {{#unless currentUser}}
              {{d-button action="showLogin" class="btn-primary topic-retry" icon="user" label="log_in"}}
            {{/unless}}
          {{else}}
            {{d-button action="retryLoading" class="btn-primary topic-retry" icon="refresh" label="errors.buttons.again"}}
          {{/if}}
        </div>
        {{conditional-loading-spinner condition=retrying}}
      {{/if}}
    {{/conditional-loading-spinner}}
  </div>
{{/if}}

{{render "share"}}

{{#if currentUser.enable_quoting}}
  {{render "quote-button"}}
{{/if}}

{{#if currentUser.canManageTopic}}
  {{show-topic-admin show="showTopicAdminMenu"}}
  {{render "topic-admin-menu"}}
{{/if}}