 
   render: ->
     <div className="ChannelThreadPane is-withChat">
-      {@renderComingSoonModal()}
+      <CollaborationComingSoonModal
+        onClose={@bound 'onClose'}
+        isOpen={@state.isComingSoonModalOpen}/>
       <section className="ChannelThreadPane-content"
         onDragEnter={@bound 'onDragEnter'}>
         {@renderDropSection()}

    @setState isComingSoonModalOpen: no


  renderComingSoonModal: ->

    if @state.isComingSoonModalOpen
      title = 'Coming Soon'
      <Modal className='ComingSoonModal' isOpen={yes} onClose={@bound 'onClose'}>
        <div className='ComingSoonModal-header'>
          <h3>COLLABORATE USING VIDEO CHAT</h3>
          <span>Coming really soon...</span>
        </div>
        <div className='ComingSoonModal-content'>
          <img src='/a/images/activity/coming-soon-modal-content.png'/>
        </div>
      </Modal>


  renderDropSection: ->

    <div

      onDragOver={@bound 'onDragOver'}
      onDragLeave={@bound 'onDragLeave'}
      className={@getDropTargetClassNames()}>
      <div className='ChannelThreadPane-dropContainerContent'>Drop VM's here<br/> to start collaborating</div>
    </div>


