include ../../sticker/components/sticker
mixin renderChatMessage (message, options = { })
  - var authorName = message.author.displayName || message.author.username;
  div(
    data-message-id= message._id,
    data-author-id= message.author._id,
    class={ 'full-width': options.fullWidth },
  ).site-chat-message
    .uk-margin-small
      div(uk-grid).uk-grid-small
        .uk-width-auto
          +renderProfileIcon(message.author, message.author.displayName || message.author.username, 'xsmall')

        .uk-width-expand
          .chat-username.uk-text-truncate= message.author.displayName || message.author.username
          .uk-text-small.uk-text-muted.uk-text-truncate= message.author.username

        if !options.hideMenu && (user && !message.author._id.equals(user._id))
          .uk-width-auto.chat-user-menu
            button(type="button").uk-button.uk-button-link.chat-menu-button
              i.fas.fa-ellipsis-h
            div(data-message-id= message._id, uk-dropdown="mode: click").dtp-chatmsg-menu
              ul.uk-nav.uk-dropdown-nav
                li
                  a(
                    href="",
                    data-message-id= message._id,
                    data-user-id= message.author._id,
                    data-username= message.author.username,
                    onclick="return dtp.app.muteChatUser(event);",
                  ) Mute #{authorName}

    //- we're gonna go ahead and force long lines to break, and the content was
    //- filtered at ingest for zalgo and HTML/XSS
    .chat-content.uk-text-break!= marked.parse(message.content)

    //- "time" is filled in by the JavaScript client using the browser's locale
    //- information so that "time" is always in the user's display timezone.
    .chat-timestamp(data-dtp-timestamp= message.created, data-dtp-timestamp-format= 'datetime').uk-text-small.uk-text-muted

    if Array.isArray(message.stickers) && (message.stickers.length > 0)
      each sticker in message.stickers
        +renderSticker(sticker, { hideSlug: true })