{{#if this.chatStateManager.isDrawerActive}}
  {{bodyClass "chat-drawer-active"}}
{{/if}}

{{#if this.chatStateManager.isDrawerExpanded}}
  {{bodyClass "chat-drawer-expanded"}}
{{/if}}

{{#if this.chatStateManager.isDrawerActive}}
  <div
    data-chat-channel-id={{this.chat.activeChannel.id}}
    data-chat-thread-id={{this.chat.activeChannel.activeThread.id}}
    class={{concat-class
      "chat-drawer"
      (if this.chatStateManager.isDrawerExpanded "is-expanded")
    }}
    {{chat/resizable-node ".chat-drawer-resizer" this.didResize}}
    style={{this.drawerStyle}}
  >
    <div class="chat-drawer-container">
      <div class="chat-drawer-resizer"></div>

      <PluginOutlet
        @name="chat-drawer-before-content"
        @outletArgs={{hash
          currentRouteName=this.chatDrawerRouter.currentRouteName
        }}
      />

      <this.chatDrawerRouter.component
        @params={{this.chatDrawerRouter.params}}
        @openURL={{this.openURL}}
        @openInFullPage={{this.openInFullPage}}
        @toggleExpand={{this.toggleExpand}}
        @close={{this.close}}
        @drawerActions={{this.drawerActions}}
      />
    </div>
  </div>
{{/if}}