extends ../../layout/main
block vendorcss
  link(rel='stylesheet', href=`/highlight.js/styles/qtcreator-light.min.css?v=${pkg.version}`)
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(poster="/img/default-poster.png", 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

  block view-navbar

  .dtp-chat-stage
    #room-member-panel.chat-sidebar
      .chat-stage-header
        div(uk-grid).uk-grid-small.uk-grid-middle
          .uk-width-expand
            .uk-text-truncate Active Members
          .uk-width-auto
            .chat-present-count.uk-text-small ---
      .sidebar-panel
        ul(id="chat-active-members", data-room-id= room._id).uk-list.uk-list-collapse

      .chat-stage-header Idle Members
      .sidebar-panel
        .uk-text-italic There are no idle members.
        ul(id="chat-idle-members", data-room-id= room._id, hidden).uk-list.uk-list-collapse

    .chat-container

      .chat-content-panel.uk-height-1-1

        .live-content.uk-height-1-1
          .chat-stage-header
            div(uk-grid).uk-grid-small
              .uk-width-expand
                .uk-text-truncate= room.name
              if room.owner._id.equals(user._id)
                .uk-width-auto
                  a(href=`/chat/room/${room._id}/settings`, uk-tooltip={ title: 'Configure room settings' }).uk-link-reset
                    i.fas.fa-cog
              .uk-width-auto
                a(href="/", uk-tooltip={ title: 'Leave room' }).uk-link-reset
                  i.fas.fa-person-through-window

          .chat-media
            div(uk-grid).uk-flex-center
              div(class="uk-width-1-1 uk-width-1-2@m uk-width-1-3@l uk-width-1-4@xl")
                +renderLiveMember(user)

          div(id="chat-message-list").chat-messages.uk-height-1-1
            -
              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.",
              };

            each message of messages
              +renderChatMessage(message)

          .chat-input-panel
            form(
              method="POST",
              action=`/chat/room/${room._id}/message`,
              id="chat-input-form",
              data-room-id= room._id,
              onsubmit="return window.dtp.app.sendUserChat(event);",
              hidden= user && user.flags && user.flags.isCloaked,
              enctype="multipart/form-data"
            ).uk-form
              textarea(id="chat-input-text", name="content", rows=2).uk-textarea.uk-resize-none.uk-border-rounded
              .uk-margin-small
                .uk-flex
                  .uk-width-expand
                  .uk-width-auto
                    button(id="chat-send-btn", type="submit", uk-tooltip={ title: 'Send message' }).uk-button.uk-button-primary.uk-button-small.uk-border-rounded.uk-light
                      i.fas.fa-paper-plane

block viewjs
  script.
    window.dtp = window.dtp || { };
    window.dtp.room = !{JSON.stringify(room)};