{{#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.chatChannelsManager.publicMessageChannels as |channel|}}
          <ChatChannelRow
            @channel={{channel}}
            @options={{hash settingsButton=true}}
          />
        {{/each}}
      {{/if}}
    </div>
  {{/if}}

  <PluginOutlet
    @name="below-public-chat-channels"
    @tagName=""
    @outletArgs={{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.chatChannelsManager.truncatedDirectMessageChannels
      as |channel|
    }}
      <ChatChannelRow @channel={{channel}} @options={{hash leaveButton=true}} />
    {{/each}}
  </div>
</div>