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

  include ../components/message

  mixin renderMemberListEntry (member, options)
    -
      options = Object.assign({
        active: false,
        idle: false,
        audioActive: false,
        audioIndicatorActive: false,
      }, options);

    li(
      data-user-id= member._id,
      data-username= member.username,
      class={ 'entry-active': options.active, 'entry-idle': options.idle, 'entry-audio-active': options.audioActive },
    ).member-list-entry
      div(uk-grid).uk-grid-collapse.uk-flex-middle
        .uk-width-auto
          img(src="/img/default-member.png").member-profile-icon
        .uk-width-expand= member.username
        .uk-width-auto
          div(data-member-id= member._id, class={ 'indicator-active': options.audioIndicatorActive }).member-audio-indicator
            i.fas.fa-volume-off

  mixin renderLiveMember (member)
    div(data-user-id= member._id, data-username= member.username).stage-live-member
      video(src="/static/video/gdl-crush.mp4", autoplay, muted, loop, disablepictureinpicture, disableremoteplayback)
      .uk-flex.live-meta.no-select
        .live-username.uk-width-expand
          .uk-text-truncate= member.displayName || member.username
        .uk-width-auto
          i.fas.fa-volume-off
        .uk-width-auto
          .uk-margin-small-left
            i.fas.fa-cog

  .dtp-chat-stage
    .chat-sidebar
      .chat-stage-header Active Members
      .sidebar-panel
        ul(id="chat-active-members").uk-list.uk-list-collapse
          +renderMemberListEntry(user)
          +renderMemberListEntry(user)
          +renderMemberListEntry(user)
          +renderMemberListEntry(user)
          +renderMemberListEntry(user)
          +renderMemberListEntry(user)
          +renderMemberListEntry(user)
          +renderMemberListEntry(user)
          +renderMemberListEntry(user)
          +renderMemberListEntry(user)
          +renderMemberListEntry(user)
          +renderMemberListEntry(user)

      .chat-stage-header Idle Members
      .sidebar-panel
        ul(id="chat-idle-members").uk-list.uk-list-collapse
          +renderMemberListEntry(user, { idle: true })
          +renderMemberListEntry(user, { idle: true })
          +renderMemberListEntry(user, { idle: true })
          +renderMemberListEntry(user, { idle: true })

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

      .chat-content-panel
        div(uk-grid).uk-grid-collapse.live-content
          .uk-width-expand
            .chat-media
              div(uk-grid)
                div(class="uk-width-1-1 uk-width-1-2@m uk-width-1-3@l uk-width-1-4@xl")
                  +renderLiveMember(user)

          .uk-width-auto
            .chat-messages
              -
                var testMessage = {
                  created: new Date(),
                  author: user,
                  content: "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.",
                };

              +renderChatMessage(testMessage)
              +renderChatMessage(testMessage)
              +renderChatMessage(testMessage)
              +renderChatMessage(testMessage)

        .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