include composer

mixin renderComment (comment)
  - var resourceId = comment.resource._id || comment.resource;
  article(data-comment-id= comment._id).uk-comment.dtp-site-comment
    header.uk-comment-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()

        if user && (comment.status === 'published')
          .uk-width-auto
            button(type="button").uk-button.uk-button-link
              span
                i.fas.fa-ellipsis-h
            div(data-comment-id= comment._id, uk-dropdown={ mode: 'click', pos: 'bottom-right' })
              ul.uk-nav.uk-dropdown-nav
                if user && user._id.equals(comment.author._id)
                  li.uk-nav-header.no-select Author menu
                  li
                    a(
                      href="",
                      data-comment-id= comment._id,
                      onclick="return dtp.app.deleteComment(event);",
                    ) Delete
                else if user
                  li.uk-nav-header.no-select Moderation menu
                  li
                    a(
                      href="",
                      data-resource-type= comment.resourceType,
                      data-resource-id= resourceId,
                      data-comment-id= comment._id,
                      onclick="return dtp.app.showReportCommentForm(event);",
                    ) Report
                  li
                    a(
                      href="",
                      data-resource-type= comment.resourceType,
                      data-resource-id= resourceId,
                      data-comment-id= comment._id,
                      onclick="return dtp.app.blockCommentAuthor(event);",
                    ) Block author

    .uk-comment-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
    div(uk-grid).uk-grid-small
      .uk-width-auto
        button(
          type="button",
          data-comment-id= comment._id,
          data-vote="up",
          onclick="return dtp.app.submitCommentVote(event);",
          title="Upvote this comment",
        ).uk-button.uk-button-link
          +renderLabeledIcon('fa-chevron-up', formatCount(comment.stats.upvoteCount))
      .uk-width-auto
        button(
          type="button",
          data-comment-id= comment._id,
          data-vote="down",
          onclick="return dtp.app.submitCommentVote(event);",
          title="Downvote this comment",
        ).uk-button.uk-button-link
          +renderLabeledIcon('fa-chevron-down', formatCount(comment.stats.downvoteCount))
      .uk-width-auto
        button(
          type="button",
          data-comment-id= comment._id,
          onclick="return dtp.app.openReplies(event);",
          title="Load replies to this comment",
        ).uk-button.uk-button-link
          +renderLabeledIcon('fa-comment', formatCount(comment.stats.replyCount))
      .uk-width-auto
        button(
          type="button",
          data-comment-id= comment._id,
          onclick="return dtp.app.openReplyComposer(event);",
          title="Write a reply to this comment",
        ).uk-button.uk-button-link
          +renderLabeledIcon('fa-reply', 'reply')

    //- Comment replies and reply composer
    div(data-comment-id= comment._id, hidden).dtp-reply-composer.uk-margin
      if user && user.permissions.canComment
        .uk-margin
          +renderCommentComposer(`/post/${comment.resource._id}/comment`, { showCancel: true, replyTo: comment._id })
    
    div(data-comment-id= comment._id, hidden).dtp-reply-list-container.uk-margin
      ul(data-comment-id= comment._id).dtp-reply-list.uk-list.uk-margin-medium-left