{{#if this.chatProgressBarContainer}}
  {{#in-element this.chatProgressBarContainer}}
    <DProgressBar @key="browse-list" @isLoading={{this.isLoading}} />
  {{/in-element}}
{{/if}}

<div class="chat-browse-view__header chat-full-page-header">
  {{#if this.site.mobileView}}
    <LinkTo @route="chat.index" class="chat-full-page-header__back-btn no-text btn-flat btn" title={{i18n "chat.browse.back"}}>
      {{d-icon "chevron-left"}}
    </LinkTo>
  {{/if}}

  <span class="chat-browse-view__title">{{i18n "chat.browse.title"}}</span>

  {{#if this.currentUser.staff}}
    <DButton
      @action={{action "createChannel"}}
      @icon="plus"
      @class={{concat-class "new-channel-btn" (if this.site.mobileView "btn-flat")}}
      @label={{if this.site.desktopView "chat.create_channel.title"}}
    />
  {{/if}}
</div>

<div class="chat-browse-view">
  <div class="chat-browse-view__actions">
    <nav>
      <ul class="nav-pills chat-browse-view__filters">
        {{#each this.tabs as |tab|}}
          <li class={{concat "chat-browse-view__filter -" tab}}>
            <LinkTo
              @route={{concat "chat.browse." tab}}
              class={{concat "chat-browse-view__filter-link -" tab}}
            >
              {{i18n (concat "chat.browse.filter_" tab)}}
            </LinkTo>
          </li>
        {{/each}}
      </ul>
    </nav>

    <DcFilterInput
      @class="filter-input"
      @filterAction={{action "debouncedFiltering"}}
      @icons={{hash right="search"}}
      placeholder={{i18n "chat.browse.filter_input_placeholder"}}
      {{did-insert (action this.focusFilterInput)}}
    />
  </div>

  {{#if (and (not this.channels.length) (not this.isLoading))}}
    <div class="empty-state">
      <span class="empty-state-title">{{i18n "chat.empty_state.title"}}</span>
      <div class="empty-state-body">
        <p>{{i18n "chat.empty_state.direct_message"}}</p>

        <LinkTo @route={{concat "chat.draft-channel"}}>
          {{i18n "chat.empty_state.direct_message_cta"}}
        </LinkTo>
      </div>
    </div>
  {{else if this.channels.length}}
    <div class="chat-browse-view__content_wrapper">
      <div class="chat-browse-view__content">
        <div class="chat-browse-view__cards">
          {{#each this.channels as |channel|}}
            <ChatChannelCard @channel={{channel}} />
          {{/each}}
        </div>

        {{#unless this.isLoading}}
          <OnVisibilityAction @action={{action "onScroll"}} />
        {{/unless}}
      </div>
    </div>
  {{/if}}
</div>