extends ../../layout/main
block vendorcss
  if user && (user.ui.theme === 'chat-light')
    link(rel='stylesheet', href=`/highlight.js/styles/qtcreator-light.min.css?v=${pkg.version}`)
  else
    link(rel='stylesheet', href=`/highlight.js/styles/obsidian.min.css?v=${pkg.version}`)
block view-content

  include ../components/message

  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

  div(
    ondragenter="return dtp.app.onDragEnter(event);",
    ondragleave="return dtp.app.onDragLeave(event);",
    ondragover="return dtp.app.onDragOver(event);",
    ondrop="return dtp.app.onDrop(event);",
  ).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
        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.sendChatRoomMessage(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
              .input-button-bar
                .uk-flex
                  .uk-width-expand
                    div(uk-grid).uk-grid-small
                      .uk-width-auto
                        button(
                          type="button",
                          data-target="#chat-input-text",
                          uk-tooltip="Select emojis to add",
                          onclick="dtp.app.showEmojiPicker(event);",
                        ).uk-button.uk-button-default.uk-button-small.uk-border-rounded
                          i.fa-regular.fa-face-smile
                      .uk-width-auto
                        .uk-form-custom
                          input(id="image-files", name="imageFiles", type="file", uk-tooltip="Select an image to attach")
                          button(type="button").uk-button.uk-button-default.uk-button-small.uk-border-rounded
                            span
                              i.fa-regular.fa-image
                      .uk-width-auto
                        .uk-form-custom
                          input(id="video-file", name="videoFiles", type="file", uk-tooltip="Select a video to attach")
                          button(type="button").uk-button.uk-button-default.uk-button-small.uk-border-rounded
                            span
                              i.fa-solid.fa-video
                  .uk-width-auto
                    button(id="chat-send-btn", type="submit", uk-tooltip={ title: 'Send message' }).uk-button.uk-button-default.uk-button-small.uk-border-rounded
                      i.fa-regular.fa-paper-plane

  .dtp-drop-feedback
    .drop-feedback-container
      .uk-text-center
        .feedback-icon
          i.fa-solid.fa-cloud-arrow-up
      .drop-feedback-prompt Drop items to attach them to your message.

  include ../../components/emoji-picker

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