extends layouts/room
block content

  include components/input-form
  include components/message

  .uk-card.uk-card-default.uk-card-small
    .uk-card-header
      div(uk-grid).uk-flex-middle.chat-menubar
        div(uk-tooltip="Room details").uk-width-expand
          h1.uk-card-title.uk-margin-remove= room.name
          div= room.description

        div(uk-tooltip="Active Members").uk-width-auto.no-select
          span
            i.fas.fa-user
          span(data-room-id= room._id).uk-margin-small-left.active-member-count= numeral(room.members.length).format('0,0')

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


        .uk-width-auto
          button(
            type="button",
            data-room-id= room._id,
            onclick="return dtp.app.chat.leaveRoom(event);",
          ).uk-button.uk-button-small.uk-border-pill.uk-text-bold
            span
              i.fas.fa-user
            span.uk-margin-small-left Leave Room
        .uk-width-auto
          .uk-inline
            button(type="button").uk-button.uk-button-link.uk-button-small
              i.fas.fa-ellipsis-h
            div(uk-dropdown={ pos: 'bottom-right', mode: 'click' })
              ul.uk-nav.uk-dropdown-nav
                li.uk-nav-heading= room.name
                li.uk-nav-divider
                li
                  a(href=`/chat/${room._id}/pop-out`, target="_blank") Pop-Out Chat        

    .uk-card-body
      #site-chat-container.uk-flex.uk-flex-column
        #chat-message-list-wrapper
          #chat-reactions
          #chat-message-list
            each message in chatMessages || [ ]
              +renderChatMessage(message)

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

    .uk-card-footer
      +renderChatInputForm(room)