{{#unless this.hideProgress}}
  {{yield}}
{{/unless}}

{{#if this.showBackButton}}
  <div class="progress-back-container">
    <DButton
      @label="topic.timeline.back"
      @class="btn-primary progress-back"
      @action={{action "goBack"}}
      @icon="arrow-down"
    />
  </div>
{{/if}}

<nav
  title={{i18n "topic.progress.title"}}
  aria-label={{i18n "topic.progress.title"}}
  class={{if this.hideProgress "hidden"}}
  id="topic-progress"
  style={{html-safe this.progressStyle}}
>
  <div class="nums">
    <h4>{{this.progressPosition}}</h4>
    <span class={{if this.hugeNumberOfPosts "hidden"}}>
      <span>/</span>
      <h4>{{this.postStream.filteredPostsCount}}</h4>
    </span>
  </div>
  <div class="bg"></div>
</nav>

<PluginOutlet @name="after-topic-progress" @connectorTagName="div" />