extends ../layouts/room
block content

  include ../../user/components/profile-icon

  include ../components/input-form
  include ../components/message

  #site-chat-container.uk-flex.uk-flex-column.uk-height-1-1
    .chat-menubar.uk-padding-small
      div(uk-grid).uk-grid-small.uk-flex-middle
        div(class="uk-width-expand").no-select
          div(title= room.name).chat-room-name.uk-margin-remove.uk-text-truncate= room.name
          .uk-text-small.uk-text-muted.uk-text-truncate= room.description

        div(title="Total Members", class="uk-visible@m").uk-width-auto.no-select
          span
            i.fas.fa-users
          span.uk-margin-small-left= formatCount(room.members.length)

        if !user || !room.owner._id.equals(user._id)

        .uk-width-auto
          .uk-inline
            button(type="button").uk-button.uk-button-link.uk-button-small
              i.fas.fa-ellipsis-h
            #chat-room-menu(uk-dropdown={ pos: 'bottom-right', mode: 'click' })
              ul.uk-nav.uk-nav-default.uk-dropdown-nav
                li
                  a(href=`/chat/room/${room._id}/widget`, target="_blank")
                    span.nav-item-icon
                      i.fas.fa-comment-dots
                    span Pop-Out Chat


                if user && !room.owner._id.equals(user._id)
                  a(
                    href=""
                    data-room-id= room._id,
                    onclick="return dtp.app.chat.leaveRoom(event);",
                  )
                    span.nav-item-icon
                      i.fas.fa-sign-out-alt
                    span Leave Room

                if user && room.owner._id.equals(user._id)
                  li.uk-nav-divider

                  li
                    a(
                      href="",
                      data-room-id= room._id,
                      onclick=`return dtp.app.chat.showForm(event, '${room._id}', 'invite-member');`
                    )
                      span.nav-item-icon
                        i.fas.fa-user-plus
                      span Invite New Member

                  li
                    a(
                      href=`/chat/room/${room._id}/invite`,
                      data-room-id= room._id,
                    )
                      span.nav-item-icon
                        i.fas.fa-mail-bulk
                      span Manage Invites

                  li.uk-nav-divider

                  li
                    a(href=`/chat/room/${room._id}/settings`)
                      span.nav-item-icon
                        i.fas.fa-cog
                      span Settings


    .chat-content-wrapper
      div(uk-grid).uk-grid-small.uk-height-1-1
        #chat-webcam-container(hidden).uk-width-auto
          ul#chat-webcam-list.uk-list

        .uk-width-expand
          #chat-message-list-wrapper.uk-height-1-1
            #chat-message-list
              each message in chatMessages || [ ]
                +renderChatMessage(message)

            #chat-reactions.no-select

            .chat-message-menu
              button(type="button", onclick="return dtp.app.chat.resumeChatScroll(event);").chat-scroll-return Resume scrolling

    +renderChatInputForm(room)