<div
  id="suggested-topics"
  class="suggested-topics"
  role="complementary"
  aria-labelledby="suggested-topics-title"
>
  <UserTip @id="suggested_topics" />

  <h3 id="suggested-topics-title" class="suggested-topics-title">
    {{i18n this.suggestedTitleLabel}}
  </h3>

  <div class="topics">
    {{#if this.topic.isPrivateMessage}}
      <BasicTopicList
        @hideCategory="true"
        @showPosters="true"
        @topics={{this.topic.suggestedTopics}}
      />
    {{else}}
      <BasicTopicList @topics={{this.topic.suggestedTopics}} />
    {{/if}}
  </div>

  <h3 class="suggested-topics-message">
    {{html-safe this.browseMoreMessage}}
  </h3>
</div>

<span>
  <PluginOutlet
    @name="below-suggested-topics"
    @connectorTagName="div"
    @outletArgs={{hash topic=this.topic}}
  />
</span>