<div class="wd-noticeboard-comments-panel" ng-show="showComments" style="padding:10px 0 10px 10px;border:none;">
    <div class="comment-item" ng-repeat="comment in comments | orderBy:datePosted:true">
        <div class="commentItemContainer comment-level-1" wizdom-include="'commentItem'"></div>
    </div>
    <script type="text/ng-template" id="/customTemplate.html">
        <ul class="list-group user-search" style="padding-left:0">
            <li class="list-group-item" mentio-menu-item="principal" ng-repeat="principal in items">
                <div style="display:inline-block; vertical-align:middle"
                     class="presence"
                     wizdom365-presence-picture
                     size="AVATAR"
                     accountname="principal.loginName"
                     name="principal.principalID">
                </div>
                <span class="text-primary" ng-bind-html="principal.displayName | mentioHighlight:typedTerm:'menu-highlighted' | unsafe"></span>
            </li>
        </ul>
    </script>
    <script type="text/ng-template" id="commentItem">
        <div class="media" style="border-bottom:none;"
             ng-class="{commentItemHover: hover}" ng-mouseenter="hover = true" ng-mouseleave="hover = false" ng-show="comment.author">
            <div class="media-left">
                <div class="presence media-object"
                     wizdom365-presence-picture
                     size="AVATAR"
                     accountname="comment.author.loginName"
                     name="comment.author.displayName">
                </div>
            </div>
            <div class="media-body">
                <div class="normal-mode" ng-hide="comment.editing">
                    <div class="container-fluid" style="padding-left:10px;">
                        <div class="comments-author-content">
                            <a>
                                <span class="presence text-center"
                                      wizdom365-presence-picture
                                      type="defaultrender"
                                      size="SMALL"
                                      accountname="comment.author.loginName"
                                      name="comment.author.displayName"></span>
                            </a><br/>
                            <span class="previewTextPosted pre" ng-if="(comment.status != 2)" ng-bind-html="(comment.content | linky:'_blank' | checkForLongLinks | wizdom365TrustHtml)"></span>
                        </div>
                        <a ng-click="showPicture(comment.picture)" href="#" ng-if="(comment.picture && comment.status != 2)">
                            <img class="comment-picture"
                                 ng-src="{{comment.picture}}"
                                 ng-if="(comment.picture && comment.status != 2)" />
                        </a>
                        <span data-wizdom365-link-preview
                              ng-if="(comment.preview && comment.previewMetadata && comment.status != 2)"
                              data-link-metadata="comment.previewMetadata">
                        </span>

                        <div class="previewTextPostedEmpty" ng-if="comment.status == 2"></div>
                        <div class="socialPanel previewTextPosted">
                            <small>
                                <a class="wizdom-link" ng-click="comment.status != 2 && likeItem(comment);" tooltip-html-unsafe="{{getTooltipText(comment)}}" ng-style="{'color':comment.isLiked?'#0078d7':'#666666', 'cursor':comment.status == 2?'not-allowed':'pointer'}">
                                    <span class="wizdom-icon icon-hand-like-2" ng-style="{'color':comment.isLiked?'#0078d7':'#a6a6a6'}"></span> {{comment.likes.length}}
                                </a>
                                <a ng-if="comment.childCommentsCount >0" class="wizdom-link" title="{{'Number of comments' | translate}}" style="color:#0078d7;" ng-style="{'cursor':comment.status == 2?'not-allowed':'pointer'}">
                                    <span class="wizdom-icon icon-bubble-2" style="color:#0078d7;"></span> {{comment.childCommentsCount}}
                                </a>
                                <span> &bull; </span>
                                <a ng-if="comment.level+1 < allowedlevel" href="" ng-click="comment.status != 2 && addComment(comment);" ng-attr-title="{{'Reply' | translate }}" style="color:#0078d7" ng-style="{'cursor':comment.status == 2?'not-allowed':'pointer'}">{{ 'Reply' | translate }}</a>
                                <span ng-if="comment.level+1 < allowedlevel"> &bull; </span>
                                <i class="glyphicon glyphicon-time"></i>
                                <span am-time-ago="(comment.status == 1 ? comment.dateModified : comment.datePosted | wizdom365FormatDate)"></span>
                                <span ng-if="comment.status != 0">{{getCommentDetails(comment)}} <span>&bull;</span></span>
                            </small>
                        </div>
                        <div class="commentItem-action">
                            <label ng-if="comment.status != 2 && comment.canDelete" style="cursor: pointer;"><span class="glyphicon glyphicon-remove" ng-click="deleteComment(comment);" title="{{'Delete' | translate}}"></span></label>
                            <label ng-if="comment.status != 2 && comment.canEdit" style="cursor: pointer;"><span class="glyphicon glyphicon-pencil" ng-click="editComment(comment);" title="{{'Edit' | translate}}"></span></label>
                            <label ng-if="comment.preview && comment.previewMetadata && comment.status != 2 && comment.canEdit" style="cursor: pointer;"><span class="glyphicon glyphicon-ban-circle" ng-click="removePreview(comment);" title="{{'Remove Preview' | translate }}"></span></label>
                        </div>
                    </div>
                </div>
                <div class="edit-mode" ng-show="comment.editing">
                    <div class="edit-comment-panel row" style="padding-top:2px;margin-left:0;margin-right:0;">
                        <div class="edit-comment-placeholder">
                            <div class="container-fluid">
                                <div class="row">
                                    <div class="edit-comment col-sm-12">
                                        <textarea class="edit-comment-textarea txtComment_{{$index}}_{{autofocus ? '' : 'manualfocus'}}" ng-style="{'min-height':comment.targetID==itemid? '52px': 'none'}"
                                                  rows="{{comment.rows}}"
                                                  auto-expand
                                                  ng-keypress="keypress($event,comment)"
                                                  ng-model="comment.editingContent"
                                                  ng-focus="(autofocus && comment.editing) || (comment.editing && !$index == 0)"
                                                  id="txtComment"
                                                  wizdom365-set-focus="(autofocus && comment.editing) || (comment.editing && !$index == 0)"
                                                  ng-attr-placeholder="{{'Write a comment...' | translate}}"
                                                  mentio
                                                  mentio-trigger-char="'@'"
                                                  mentio-require-leading-space="true"
                                                  mentio-items="searchPrincipals"
                                                  mentio-template-url="/customTemplate.html"
                                                  mentio-search="searchForPrincipal(term)"
                                                  mentio-select="selectUser(item)"
                                                  ng-model-options="{ debounce: 800 }"
                                                  style="padding-right: 97px!important;min-height: 52px;"></textarea>

                                        <div style="position: absolute; right: 0px;top: 0px;height:44px;">
                                            <a style="float:right;margin-top:2px;" href="" ng-click="cancelEdit(comment)" ng-hide="comment.commentID==0 && comment.targetID==itemid" title="{{'Cancel Edit' | translate}}">
                                                <span class="glyphicon glyphicon-remove"></span>
                                            </a>
                                            <a style="position:relative; height: 44px;" class="wizdom-link" title="Picture">
                                                <wizdom365-image-picker ng-model="comment.selectedImage" imageclass="picture" imagecolor="#a6a6a6" style="height: 44px!important; max-height: 44px!important; position: absolute; width: 98px!important; margin-top: 5px; right: 7px;"></wizdom365-image-picker>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                <div class="row" style="margin-bottom:5px;">
                                    <div class="edit-comment edit-comment-controls" style="margin:5px 0; padding:0 10px;">
                                        <button type="button" class="btn btn-primary pull-left wiz-btn-padding" ng-disabled="loading" ng-click="postComment(comment);">{{(comment.commentID >0 ? 'Save Changes' : 'Add') | translate}}</button>
                                    </div>
                                    <div ng-show="comment.commentSaving == 'loading'" class="edit-comment edit-comment-controls pull-left">
                                        <div class="pull-left padding">
                                            <div class="edit-comment edit-comment-controls">
                                                <div class="loader" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row" style="margin-left:0;">
                                    <div class="selected-image" ng-if="comment.selectedImage">
                                        <img ng-src="{{comment.selectedImage}}" style="max-width: 200px;" />
                                        <a href="" ng-click="removeImage(comment)" aria-hidden="true"><span class="glyphicon glyphicon-remove"></span></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div ng-show="comment.editing && comment.targetID == itemid">
                <div class="load-more">
                    <a href="" ng-if="comments.length > 0 && comments.length-1 < targetTotalComments" ng-click="showMorePreviousComments();" ng-disabled="loadingMore">{{'View previous comments' | translate}}</a>
                    <a href="" ng-if="previousViewed" ng-click="showLessComments();" ng-disabled="loadingMore" style="margin-left:20px">{{'Show less comments' | translate}}</a>
                    <span class="loader pull-left" ng-show="loadingMore"></span>
                </div>
            </div>
        </div>
        <div ng-if="comment.comments.length > 0 && comment.comments.length < comment.childCommentsCount" style="margin-left:40px;">
            <a href="" ng-click="showMorePreviousChildComments(comment);" ng-disabled="comment.loadingMore">{{'View previous comments' | translate}}</a>
            <span class="loader pull-left" ng-show="comment.loadingMore"></span>
        </div>
        <div ng-if="comment.status != 2">
            <div ng-repeat="comment in comment.comments | orderBy:datePosted:true" style="margin-left:40px;">
                <div class="commentItemContainer comment-level-gt-1" wizdom-include="'commentItem'"></div>
            </div>
        </div>
    </script>

</div>
