mixin renderComment (comment)
  div(data-comment-id= comment._id).uk-card.uk-card-default.uk-card-small.dtp-site-comment.uk-border-rounded
    .uk-card-header
      div(uk-grid).uk-grid-medium.uk-flex-middle
        .uk-width-auto
          if comment.author.picture && comment.author.picture.small
            img(src= `/image/${comment.author.picture.small._id}`).site-profile-picture.sb-small.uk-comment-avatar
          else
            img(src="/img/default-member.png").site-profile-picture.sb-small.uk-comment-avatar

        .uk-width-expand
          h4.uk-comment-title.uk-margin-remove= comment.author.displayName || comment.author.username
          .uk-comment-meta= moment(comment.created).fromNow()

    .uk-card-body
      case comment.status
        when 'published'
          if comment.flags && comment.flags.isNSFW
            div.uk-alert.uk-alert-info.uk-border-rounded
              div(uk-grid).uk-grid-small.uk-text-small.uk-flex-middle
                .uk-width-expand NSFW comment hidden by default. Use the eye to show/hide.
                .uk-width-auto
                  button(
                    type="button",
                    uk-toggle={ target: `.comment-content[data-comment-id="${comment._id}"]` },
                    title="Show/hide the comment text",
                  ).uk-button.uk-button-link
                    span
                      i.fas.fa-eye
          .comment-content(data-comment-id= comment._id, hidden= comment.flags ? comment.flags.isNSFW : false)!= marked.parse(comment.content)
        when 'removed'
          .comment-content.uk-text-muted [comment removed]
        when 'mod-warn'
          alert
            span A warning has been added to this comment.
            button(type="button", uk-toggle={ target: `.comment-content[data-comment-id="${comment._id}"]` })
          .comment-content(data-comment-id= comment._id, hidden)!= marked.parse(comment.content)
        when 'mod-removed'
          .comment-content.uk-text-muted [comment removed]

    //- Comment meta bar
    .uk-card-footer
      div(uk-grid).uk-grid-small.uk-text-small.uk-text-muted
        .uk-width-auto
          +renderLabeledIcon('fa-chevron-up', formatCount(comment.resourceStats.upvoteCount))
        .uk-width-auto
          +renderLabeledIcon('fa-chevron-down', formatCount(comment.resourceStats.downvoteCount))
        .uk-width-auto
          +renderLabeledIcon('fa-comment', formatCount(comment.commentStats.replyCount))