<label for="choose-topic-title">
  {{#if this.labelIcon}}
    {{d-icon this.labelIcon}}
  {{/if}}
  <span>{{i18n this.labelText}}</span>
</label>

<TextField
  @value={{this.topicTitle}}
  @placeholderKey="choose_topic.title.placeholder"
  @id="choose-topic-title"
/>

{{#if this.loading}}
  <p>{{i18n "loading"}}</p>
{{else}}
  {{#if this.noResults}}
    <p>{{i18n "choose_topic.none_found"}}</p>
  {{else}}
    <div class="choose-topic-list" role="radiogroup">
      {{#each this.topics as |t|}}
        <div class="controls existing-topic">
          <label class="radio">
            <Input
              id={{concat "choose-topic-" t.id}}
              @checked={{eq t.id this.selectedTopicId}}
              @type="radio"
              name="choose_topic_id"
              {{on "click" (action "chooseTopic" t)}}
            />
            <TopicStatus @topic={{t}} @disableActions={{true}} />
            <span class="topic-title">
              {{replace-emoji t.fancy_title}}
            </span>
            <span class="topic-categories">
              {{bound-category-link
                t.category
                recursive=true
                hideParent=true
                link=false
              }}
            </span>
          </label>
        </div>
      {{/each}}
    </div>
  {{/if}}
{{/if}}