extends ../../layout/main
block view-content

  .dtp-chat-stage
    .chat-sidebar
      .chat-stage-header Active Members
      .sidebar-panel This is a sidebar content panel. It should word-wrap correctly and will be used to display usernames in the room with status.

      .chat-stage-header Idle Members
      .sidebar-panel This is a sidebar content panel. It should word-wrap correctly and will be used to display usernames in the room with status.

    .chat-container
      .chat-stage-header
        div(uk-grid)
          .uk-width-expand= room.name


      .chat-content-panel
        .chat-media
          div(uk-grid)
            .uk-width-1-4
              .live-member
                video(src="/static/video/gdl-crush.mp4", autoplay, muted, loop, disablepictureinpicture, disableremoteplayback)
                .uk-flex.live-meta
                  .live-username.uk-width-expand Rob Colbert
                  .uk-width-auto
                    i.fas.fa-volume-off
                  .uk-width-auto
                    .uk-margin-small-left
                      i.fas.fa-cog

        .chat-messages This is the chat content panel. It should word-wrap and scroll correctly, and will be where individual chat messages will render as they arrive and are sent.

      .chat-input-panel
        textarea(id="chat-input", name="chatInput", rows=2).uk-textarea.uk-resize-none.uk-border-rounded
        .uk-margin-small
          .uk-flex
            .uk-width-expand
            .uk-width-auto
              button(type="submit", uk-tooltip={ title: 'Send message' }).uk-button.uk-button-default.uk-button-small.uk-border-rounded
                i.fas.fa-paper-plane