include ../../link/components/preview
include ../../user/components/profile-picture
mixin renderChatMessage (message)
  .chat-message
    .uk-flex
      .uk-width-auto.no-select
        +renderProfilePicture(message.author, { iconClass: 'member-profile-icon' })
      .uk-width-expand
        .message-attribution.uk-margin-small.no-select
          div(uk-grid).uk-grid-small.uk-flex-middle
            .uk-width-auto
              .author-display-name= message.author.displayName || message.author.username
            .uk-width-auto
              .message-timestamp(
                data-dtp-timestamp= message.created,
                data-dtp-timestamp-format= "time",
                uk-tooltip={ title: dayjs(message.created).format('MMM D, YYYY') }
              )= dayjs(message.created).format('h:mm a')

        if message.content && (message.content.length > 0)
          .message-content
            div!= marked.parse(message.content, { renderer: fullMarkedRenderer })

        if message.attachments
          .message-attachments
            if Array.isArray(message.attachments.images) && (message.attachments.images.length > 0)
              div(class="uk-child-width-1-1 uk-child-width-1-2@s uk-child-width-1-3@m uk-child-width-1-4@l uk-child-width-1-5@xl", uk-grid, uk-lightbox="animation: slide").uk-grid-small
                each image of message.attachments.images
                  a(href=`/image/${image._id}`, data-type="image", data-caption= `${image.metadata.width}x${image.metadata.height} | ${image.metadata.space.toUpperCase()} | ${image.metadata.format.toUpperCase()} | ${numeral(image.size).format('0,0.0b')}`)
                    img(src=`/image/${image._id}`, width= image.metadata.width, height= image.metadata.height, alt="Image attachment").image-attachment

            if Array.isArray(message.attachments.videos) && (message.attachments.videos.length > 0)
              each video of message.attachments.videos
                video(
                  data-video-id= video._id,
                  poster= video.thumbnail ? `/image/${video.thumbnail._id}` : false,
                  controls, disablepictureinpicture, disableremoteplayback, playsinline, 
                ).video-attachment
                  source(src=`/video/${video._id}/media`)

        if Array.isArray(message.links) && (message.links.length > 0)
          each link in message.links
            div(class="uk-width-large").uk-margin-small
              +renderLinkPreview(link, { layout: 'responsive' })
      .uk-width-auto
        .uk-text-bold !

    .message-menu
      div(uk-grid).uk-grid-small
        .uk-width-auto
          div Emoji reacts & shit