<div class='container'>
  {{custom-html "top"}}
  {{global-notice}}
  {{discourse-banner user=currentUser banner=site.banner overlay=view.hasScrolled}}
</div>

{{#if postStream.loaded}}

  {{#if postStream.firstPostPresent}}
    <div id='topic-title'>
      <div class='container'>
        {{#if showStarButton}}
          <a {{bind-attr class=":star starred:starred"}} {{action "toggleStar"}} href='#' {{bind-attr title="starTooltip"}}></a>
        {{/if}}

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

            <button class='btn btn-primary btn-small no-text' {{action "finishedEditingTopic"}}>{{fa-icon check}}</button>
            <button class='btn btn-small no-text' {{action "cancelEditingTopic"}}>{{fa-icon times}}</button>
          {{else}}
            <h1>
              {{#unless is_warning}}
                <span class="private-message-glyph">{{fa-icon envelope}}</span>
              {{/unless}}

              {{#if details.loaded}}
                {{topic-status topic=model}}
                <a href='{{unbound url}}' {{action "jumpTop"}}>
                  {{#if topicSaving}}
                    {{fancy_title}}
                  {{else}}
                    {{{fancy_title}}}
                  {{/if}}
                </a>
              {{/if}}


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

            {{#unless isPrivateMessage}}
              {{#if category.parentCategory}}
                {{bound-category-link category.parentCategory}}
              {{/if}}
              {{bound-category-link category}}
            {{/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 id}}'>
        <div class='posts-wrapper'>

          {{render 'topic-progress'}}

          {{#if postStream.loadingAbove}}
            <div class='spinner'></div>
          {{/if}}

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

          {{#if postStream.loadingBelow}}
            <div class='spinner'></div>
          {{/if}}
        </div>
        <div id='topic-bottom'></div>

        {{#if postStream.loadingFilter}}
          <div class='spinner small'></div>
        {{else}}
          {{#if postStream.loadedAllPosts}}

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

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

      </section>
    </div>

  </div>

{{else}}
  {{#if hasError}}
    <div class='container'>
    {{#if notFoundHtml}}
      {{{notFoundHtml}}}
    {{else}}
      <div class="topic-error">
        <div>{{message}}</div>
        {{#if noRetry}}
          {{#unless currentUser}}
            <button {{action "showLogin"}} class='btn btn-primary topic-retry'>{{fa-icon user}} {{i18n log_in}}</button>
          {{/unless}}
        {{else}}
          <button class="btn btn-primary topic-retry" {{action "retryLoading"}}><i class="fa fa-refresh"></i> {{i18n errors.buttons.again}}</button>
        {{/if}}
      </div>
      {{#if retrying}}
        <div class='spinner'></div>
      {{/if}}
    {{/if}}
    </div>
  {{else}}
    <div class='container'>
      <div class='spinner'></div>
    </div>
  {{/if}}
{{/if}}

{{render "share"}}

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

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