<DModalBody @title="composer.link_dialog_title" @class="insert-link">
  <form id="insert-hyperlink-form" {{on "submit" (action "ok")}}>
    <div class="inputs">
      <TextField
        @value={{this.linkUrl}}
        @placeholderKey="composer.link_url_placeholder"
        @class="link-url"
        @key-up={{action "search"}}
        @autofocus="autofocus"
      />
      {{#if this.searchLoading}}
        {{loading-spinner}}
      {{/if}}
      {{#if this.searchResults}}
        <div class="internal-link-results">
          {{#each this.searchResults as |result|}}
            <a
              class="search-link"
              href={{result.url}}
              onclick={{action "linkClick"}}
              data-title={{result.fancy_title}}
            >
              <TopicStatus @topic={{result}} @disableActions={{true}} />
              {{replace-emoji result.fancy_title}}
              <div class="search-category">
                {{#if result.category.parentCategory}}
                  {{category-link result.category.parentCategory}}
                {{/if}}
                {{category-link result.category hideParent=true}}
                {{discourse-tags result}}
              </div>
            </a>
          {{/each}}
        </div>
      {{/if}}
    </div>
    <div class="inputs">
      <TextField
        @value={{this.linkText}}
        @placeholderKey="composer.link_optional_text"
        @class="link-text"
      />
    </div>
  </form>
</DModalBody>

<div class="modal-footer">
  <DButton
    @class="btn-primary"
    @label="composer.modal_ok"
    @action={{action "ok"}}
    @type="submit"
    @form="insert-hyperlink-form"
  />

  <DButton
    @class="btn-danger"
    @label="composer.modal_cancel"
    @action={{action "cancel"}}
  />
</div>