@(comments: List[models.Comment])(implicit user: Option[models.User])

@import api.Permission

@comments.reverse.map { c =>
    <!-- If the user can view the comment, it will be displayed. If not, nothing is displayed. -->
    @if(Permission.checkPermission(Permission.ViewComments, ResourceRef(ResourceRef.comment, c.id))) {
        <div class="comment" id="comment_@c.id">
            <div class="media">
                <a class="pull-left" href="@routes.Profile.viewProfileUUID(c.author.id)">
                    <div class="thumbnail">
                        <img class="avatar" src='@c.author.avatarURL'>
                    </div>
                </a>
                <div class="media-body">
                    <div class="comment-header">
                        <a href="@routes.Profile.viewProfileUUID(c.author.id)">@c.author.fullName</a>
                        <span>•</span>
                        <span>@c.posted.format("MMM dd, yyyy HH:mm:ss")</span>
                    </div>
                    <div class="comment-body" id="comment-body_@c.id">@Html(c.text)</div>
                    <div class="comment-footer">
                            <!-- If the user can add a comment, reply will be displayed. If not, nothing is displayed. -->
                        @if(Permission.checkPermission(Permission.AddComment, ResourceRef(ResourceRef.comment, c.id))) {
                            <a href="#"
                            onclick="return showReplyComment('@c.id');"
                            class="btn btn-link btn-xs" title="Reply To Comment">
                                <span class="glyphicon glyphicon-share-alt"></span> Reply
                            </a>
                        }
                            &nbsp;
                            &nbsp;
                            <!-- If the user can edit the comment, it will be displayed. If not, nothing is displayed. -->
                        @if(Permission.checkPermission(Permission.EditComment, ResourceRef(ResourceRef.comment, c.id))) {
                            <a href="#" onclick="return showEditComment('@c.id');" class="btn btn-link btn-xs" title="Edit Comment">
                                <span class="glyphicon glyphicon-edit"></span> Edit
                            </a>
                        }
                            &nbsp;
                            &nbsp;
                            <!-- If the user can delete the comment, it will be displayed. If not, nothing is displayed. -->
                        @if(Permission.checkPermission(Permission.DeleteComment, ResourceRef(ResourceRef.comment, c.id))) {
                            <a href="#" onclick="return deleteComment('@c.id');" class="btn btn-link btn-xs" title="Delete Comment">
                                <span class="glyphicon glyphicon-trash"></span> Delete
                            </a>
                        }
                    </div>
                    <div class="comment-reply">
                        <div class="comment-threads unstyled" id="reply_@c.id">
                        @comment(c.replies)
                        </div>
                    </div>
                </div>
            </div>
        </div>
    }
}
<script src="@routes.Assets.at("javascripts/comment-delete.js")" type="text/javascript"></script>
<script src="@routes.Assets.at("javascripts/comment-edit.js")" type="text/javascript"></script>

    <script type="text/javascript" language="javascript">
    function deleteCommentCallback(id) {
    	$("#comment_" + id).remove();
    }    
</script>