.comment-wrapper(ng-if="!vm.comment.delete_comment_date")
    img.comment-avatar(
        tg-avatar="vm.comment.user"
        ng-alt="{{vm.comment.user.name}}"
    )
    .comment-main
        .comment-data
            span.comment-creator {{vm.comment.user.name}}
            span.comment-date {{vm.comment.created_at | momentFormat:'DD MMM YYYY HH:mm'}}
            .comment-edited(ng-if="vm.comment.edit_comment_date")
                span(translate="COMMENTS.EDITED_COMMENT")
                span {{vm.comment.edit_comment_date | momentFormat:'DD MMM YYYY HH:mm'}}
                span.separator -
                a(
                    href=""
                    title="{{'COMMENTS.SHOW_HISTORY' | translate}}"
                    ng-click="vm.displayCommentHistory()"
                )
                    span(translate="COMMENTS.SHOW_HISTORY")
                    tg-svg(svg-icon="icon-bulk")
        .comment-container
            .comment-text.wysiwyg(
                ng-if="!vm.editMode"
                tg-bind-code="vm.comment.comment"
            )
            .comment-editor(
                ng-if="vm.editMode"
                ng-keyup="vm.checkCancelComment($event)"
            )
                tg-comment-edit-wysiwyg.edit-comment

    .comment-options(ng-if="vm.canEditDeleteComment() && !vm.editMode")
        tg-svg.comment-option(
            svg-icon="icon-edit"
            svg-title-translate="COMMON.EDIT"
            ng-click="vm.onEditMode({commentId: vm.comment.id})"
            ng-if="!vm.editMode"
        )
        tg-svg.comment-option(
            svg-icon="icon-trash"
            svg-title-translate="COMMON.DELETE"
            ng-click="vm.onDeleteComment({commentId: vm.comment.id})"
            ng-if="!vm.editMode"
            tg-loading="vm.deleting == vm.comment.id"
        )

.deleted-comment-wrapper(
    ng-if="vm.comment.delete_comment_date"
)
    .deleted-comment-main
        span(
            translate="COMMENTS.DELETED_INFO"
            translate-values="{user: vm.comment.delete_comment_user.name }"
        )
        span - {{vm.comment.delete_comment_date | momentFormat:'DD MMM YYYY HH:mm'}}
        a.toggle-deleted-comment(
            href=""
            title="{{ 'COMMENTS.SHOW_DELETED' | translate }}"
            ng-click="vm.showDeletedComment()"
            ng-if="vm.hiddenDeletedComment"
        )
            span(translate="COMMENTS.SHOW_DELETED")
            tg-svg(
                svg-icon="icon-arrow-down"
                svg-title-translate="COMMENTS.SHOW_DELETED"
            )
        a.toggle-deleted-comment(
            href=""
            title="{{'COMMENTS.HIDE_DELETED' | translate}}"
            ng-click="vm.hideDeletedComment()"
            ng-if="!vm.hiddenDeletedComment"
        )
            span(translate="COMMENTS.HIDE_DELETED")
            tg-svg(
                svg-icon="icon-arrow-up"
                svg-title-translate="COMMENTS.HIDE_DELETED"
            )
        a.restore-comment(
            href=""
            title="{{'COMMENTS.RESTORE' | translate}}"
            ng-click="vm.onRestoreDeletedComment({commentId: vm.comment.id})"
            tg-loading="vm.editing == vm.comment.id"
        )
            tg-svg(
                svg-icon="icon-reload"
                svg-title-translate="COMMENTS.RESTORE"
            )
            span(translate="COMMENTS.RESTORE")
    p.deleted-comment-comment(
        ng-if="!vm.hiddenDeletedComment"
        tg-bind-code="vm.comment.comment"
    )