{{#if (and this.showMobileDirectMessageButton this.canCreateDirectMessageChannel)}}
  <LinkTo @route="chat.draft-channel" class="btn-flat open-draft-channel-page-btn keep-mobile-sidebar-open btn-floating" title={{i18n this.createDirectMessageChannelLabel}}>
    {{d-icon "plus"}}
  </LinkTo>
{{/if}}

<div
  role="region"
  aria-label={{i18n "chat.aria_roles.channels_list"}}
  class="channels-list"
  {{on "scroll" (if this.chatStateManager.isFullPageActive this.storeScrollPosition (noop))}}
>
  {{#if this.displayPublicChannels}}
    <div class="chat-channel-divider public-channels-section">
      {{#if this.inSidebar}}
        <span
          class="title-caret"
          id="public-channels-caret"
          role="button"
          title="toggle nav list"
          {{on "click" (action "toggleChannelSection" "public-channels")}}
          data-toggleable="public-channels"
        >
          {{d-icon "angle-up"}}
        </span>
      {{/if}}
      <span class="channel-title">{{i18n "chat.chat_channels"}}</span>

      <LinkTo @route="chat.browse" class="btn no-text btn-flat open-browse-page-btn title-action" title={{i18n "chat.channels_list_popup.browse"}}>
        {{d-icon "pencil-alt"}}
      </LinkTo>
    </div>

    <div id="public-channels" class={{this.publicChannelClasses}}>
      {{#if this.publicChannelsEmpty}}
        <div class="public-channel-empty-message">
          <span class="channel-title">{{i18n "chat.no_public_channels"}}</span>
          <LinkTo @route="chat.browse">
            {{i18n "chat.click_to_join"}}
          </LinkTo>
        </div>
      {{else}}
        {{#each this.publicChannels as |channel|}}
          <ChatChannelRow
            @channel={{channel}}
            @options={{hash settingsButton=true}}
          />
        {{/each}}
      {{/if}}
    </div>
  {{/if}}

  <PluginOutlet
    @name="below-public-chat-channels"
    @tagName=""
    @args={{hash inSidebar=this.inSidebar}}
  />

  {{#if this.showDirectMessageChannels}}
    <div class="chat-channel-divider direct-message-channels-section">
      {{#if this.inSidebar}}
        <span
          class="title-caret"
          id="direct-message-channels-caret"
          role="button"
          title="toggle nav list"
          {{on
            "click"
            (action "toggleChannelSection" "direct-message-channels")
          }}
          data-toggleable="direct-message-channels"
        >
          {{d-icon "angle-up"}}
        </span>
      {{/if}}
      <span class="channel-title">{{i18n "chat.direct_messages.title"}}</span>

      {{#if (and this.canCreateDirectMessageChannel (not this.showMobileDirectMessageButton))}}
        <LinkTo @route="chat.draft-channel" class="btn no-text btn-flat open-draft-channel-page-btn" title={{i18n this.createDirectMessageChannelLabel}}>
          {{d-icon "plus"}}
        </LinkTo>
      {{/if}}
    </div>
  {{/if}}

  <div id="direct-message-channels" class={{this.directMessageChannelClasses}}>
    {{#each this.sortedDirectMessageChannels as |channel|}}
      <ChatChannelRow
        @channel={{channel}}
        @options={{hash leaveButton=true}}
      />
    {{/each}}
  </div>
</div>