{{#if this.chatProgressBarContainer}}
  {{#in-element this.chatProgressBarContainer}}
    <DProgressBar @key="members-view" @isLoading={{this.isFetchingMembers}} />
  {{/in-element}}
{{/if}}

{{#if (gt this.channel.membershipsCount 0)}}
  <div class="channel-members-view-wrapper">
    <div
      class={{concat
        "channel-members-view__search-input-container"
        (if this.isSearchFocused " is-focused")
      }}
    >
      <Input class={{this.inputSelector}} placeholder={{i18n "chat.members_view.filter_placeholder"}} {{on "input" (action "onFilterMembers" value="target.value")}} {{on "focusin" (action (mut this.isSearchFocused) true)}} {{on "focusout" (action (mut this.isSearchFocused) false)}} />
      {{d-icon "search"}}
    </div>

    <div
      class="channel-members-view__list-container"
      {{on "scroll" (action "loadMore")}}
    >

      <div role="list" class="channel-members-view__list">
        {{#each this.members as |member|}}
          <a
            class="channel-members-view__list-item"
            href={{member.user.userPath}}
            data-user-card={{member.user.username}}
            tabindex="0"
          >
            <ChatUserAvatar @user={{member.user}} @avatarSize="medium" />
            <ChatUserDisplayName @user={{member.user}} />
          </a>
        {{else}}
          {{#unless this.isFetchingMembers}}
            {{i18n "chat.channel.no_memberships_found"}}
          {{/unless}}
        {{/each}}
      </div>
    </div>
  </div>
{{else}}
  <div class="channel-members-view-wrapper">
    {{i18n "chat.channel.no_memberships"}}
  </div>
{{/if}}