{{#if this.chatProgressBarContainer}}
  {{#in-element this.chatProgressBarContainer}}
    <DProgressBar @key="dm-recipients-loader" @isLoading={{this.isFiltering}} />
  {{/in-element}}
{{/if}}

{{#if (and this.channel.isDraft (not this.isLoading))}}
  <div class="direct-message-creator">
    <div
      class="filter-area {{if this.isFilterFocused 'is-focused'}}"
      role="button"
      {{on "click" this.focusFilter}}
    >

      <span class="prefix">
        {{i18n "chat.direct_message_creator.prefix"}}
      </span>

      <div class="recipients">
        {{#each this.selectedUsers as |selectedUser|}}
          <DButton
            @class={{concat
              "selected-user"
              (if
                (eq this.highlightedSelectedUser selectedUser) " is-highlighted"
              )
            }}
            @action={{action "deselectUser" selectedUser}}
            @translatedTitle={{i18n
              "chat.direct_message_creator.selected_user_title"
              username=selectedUser.username
            }}
          >
            <ChatUserAvatar @user={{selectedUser}} />
            <span class="username">{{selectedUser.username}}</span>
            {{d-icon "times"}}
          </DButton>
        {{/each}}

        <Input
          class="filter-usernames"
          @value={{this.term}}
          autofocus="autofocus"
          {{on "input" (action "onFilterInput" value="target.value")}}
          {{on "focusin" (action (mut this.isFilterFocused) true)}}
          {{on "focusout" (action "onFilterInputFocusOut")}}
          {{on "keyup" (action "handleFilterKeyUp")}}
        />
      </div>
    </div>

    {{#if this.shouldRenderResults}}
      {{#if this.users}}
        <div class="results-container">
          <ul class="results">
            {{#each this.users as |user|}}
              <li
                class="user {{if (eq this.focusedUser user) 'is-focused'}}"
                data-username={{user.username}}
                role="button"
                tabindex="-1"
                {{on "click" (action "selectUser" user)}}
                {{on "mouseenter" (action (mut this.focusedUser) user)}}
                {{on "focus" (action (mut this.focusedUser) user)}}
                {{on "keyup" (action "handleUserKeyUp" user)}}
              >
                <ChatUserAvatar @user={{user}} @avatarSize="medium" />
                <UserInfo
                  @user={{user}}
                  @includeLink={{false}}
                  @includeAvatar={{false}}
                  @showStatus={{true}}
                  @showStatusDescription={{true}}
                />
              </li>
            {{/each}}
          </ul>
        </div>
      {{else}}
        {{#if this.term.length}}
          <div class="no-results-container">
            <p class="no-results">
              {{i18n "chat.direct_message_creator.no_results"}}
            </p>
          </div>
        {{/if}}
      {{/if}}
    {{/if}}
  </div>
{{/if}}